那么对于使用纯的css + html 怎样来实现幻灯片呢?下面有几种方法可供参考,有些还不成熟。
方案一:利用css3的animation
例子传送门点我,点我!
幻灯片 .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; } }
查看更多关于幻灯片の纯CSS,NOJavaScript_html/css_WEB-ITnose的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did108997