之前就遇到有人问,不用js,纯css实现幻灯片。那么对于使用纯的css + html 怎样来实现幻灯片呢?下面有几种方法可供参考,有些还不成熟。方案一:利用css3的animation例子传送门点我,点我!<!DOCTYPE html><html>< ...
之前就遇到有人问,不用js,纯css实现幻灯片。
那么对于使用纯的css + html 怎样来实现幻灯片呢?下面有几种方法可供参考,有些还不成熟。
方案一:利用css3的animation
例子传送门点我,点我!
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>幻灯片</title> <style> .ani { width: 440px; height: 440px; margin: 50px auto; overflow: hidden; box-shadow: 0 0 5px rgba(0, 0, 0, 1); background-size: cover; background-position: center; -webkit-animation-name: loops; -webkit-animation-duration: 20s; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes loops { 0% { background: url(../images/01.jpg) no-repeat; } 25% { background: url(../images/02.jpg) no-repeat; } 50% { background: url(../images/03.jpeg) no-repeat; } 75% { background: url(../images/04.jpg) no-repeat; } 100% { background: url(../images/05.jpg) no-repeat; } } </style></head><body><div class="ani"></div></body></html>
原标题:幻灯片の纯CSS,NO JavaScript
关键词:JavaScript
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。