简易轮播图效果案例

鼠标滑过时停止

div:hover ul{ //鼠标滑过时图片停止 animation-play-state: paused; }

鼠标滑过时设置透明

//设置鼠标悬停时其他图片的透明度 div:hover ul li{ //鼠标划过时设置透明 opacity: .6; //.6 = 0.6 透明值最高为1，只能让图片颜色变浅 } //设置鼠标悬停图片的透明度 div ul li:hover{ opacity: 1; }

图片整体左移距离

对于轮播图而言轮播效果就是横向排列的图片在规定的区域内整体向左移，移出区域的图片则不可视

@keyframes lunbo{ from{ margin-left: 0px; } to{ margin-left: -500px; } }

图片轮播时方式

ul{ animation: lunbo 15s infinite linear; }

播放速度

//（1）linear:表示动画从头到尾的速度都是相同的。 //（2）ease-in:表示动画以低速开始。 //（3）ease-out:表示动画以低速结束。 //（4）ease-in-out:表示动画以低速开始和结束。 //如果没有想用的值，也可以直接使用三次贝塞尔函数，使用网站是：http://cubic-bezier.com，可直接调试出自己想要的值；也可以在浏览器中直接调试，现在浏览器调试工具中都支持贝塞尔函数可视化调试。

播放次数

animation-iteration-count属性值有两种：

（1）直接写数字，自定义想要播放动画的次数。

（2）infinite：设置动画无线循环播放。