你的位置:首页 > 软件开发 > 网页设计 > 幻灯片の纯CSS,NO JavaScript

幻灯片の纯CSS,NO JavaScript

发布时间:2015-08-11 17:00:06
之前就遇到有人问,不用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 (#换成@)。