好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

幻灯片の纯CSS,NOJavaScript_html/css_WEB-ITnose

之前就遇到有人问,不用js,纯css实现幻灯片。

那么对于使用纯的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的详细内容...

  阅读:31次