鼠标悬停,图标会一直不停旋转。
如果实现图标一直不停旋转,则需要使用animation动画。先制作动画的各个关键帧,然后在图标中运用这一动画。
具体操作如下:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0padding:0}
ul{list-style-type: none}
ul>li{float:leftmargin-right: 10pxposition: relativewidth:100px}
li>span{display: noneposition: absolutetop: 20pxbackground: #ccc}
li:hover >span{display: block}
</style>
</head>
<body>
<ul>
<li>提示<span>任务中心</span></li>
<li>提示<span>通知</span></li>
<li>提示<span>装扮</span></li>
</ul>
</body>
</html>
4种。鼠标滑过图片过渡动画特效,该特效中共有4种效果,分别是在鼠标滑过图片时图片产生过渡动画,展现图片标题的特效。
hover是css中的一种伪类选择器,指鼠标移入然后移出的过程,这个操作可以改变元素的样式,而且它相应的子类也被改变。