css3 实现动画效果,怎样使他无限循环动下去?

html-css09

css3 实现动画效果,怎样使他无限循环动下去?,第1张

鼠标悬停,图标会一直不停旋转。 

如果实现图标一直不停旋转,则需要使用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中的一种伪类选择器,指鼠标移入然后移出的过程,这个操作可以改变元素的样式,而且它相应的子类也被改变。