例如:
页面上有一个
原本背景图为img1.png,当鼠标滑过则换为img2.png.
在CSS中这样定义
.div_style:hover{
background:
url("img2.png")
//这是改变背景色
background-repeat:
no-repeat
//这是让背景色不平铺
color:
red
//这是让字体变为红色
}
或者用
.div_style:hover{
background-image:
url("img2.png")
//这是改变背景色
background-repeat:
no-repeat//这是让背景色不平铺
color:red
//这是让字体变为红色
}
今天学习一个炫酷的小技能,纯纯css实现动态图标,hover之后静止在某一个图标。
Demo效果如下:
到这里我们的 HTML 文件就全部写完啦
这时候我们就可以得到一个图片的效果。
这里小图标总共有 11 张,相互之间的变化就是 10 步,所以动画设置如下
这样就得到了一个无限循环的逐帧动画
这样下来,默认就不会动了,然后在hover的时候“运行”就行了