用CSS实现一个简单的幻灯片效果页面

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用CSS实现一个简单的幻灯片效果页面相关的知识,希望对你有一定的参考价值。

用CSS实现一个简单的幻灯片效果页面,第一反应是利用CSS3的animation。不过为了兼容浏览器,记得加各浏览器前缀(“chrome和safira:-webkit-”、“firefox:-moz-”、“opera:-o-”),我最开始写的时候忘记加浏览器前缀,在chrome中一直没有任何显示。下面说说用到的animation各属性。
animation-name(动画名字,需用引号包裹)
animation-duration(动画持续时间,如:20s)
animaiton-iteration-count(循环次数,“infinite”为无线循环)
还有一个很重要的“keyframes(关键帧)”,书写格式为:@keyframes "动画名字"{}
“{}”内根据设置内容从“0%”到“100%”依次编写,注意“0%”一定不能把百分号省略!
以下为完整代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .myDiv {
            width: 600px;
            height: 400px;
            margin: 20px auto;
            background-size: over;
            background-position: center;
            -webkit-animation-name: ‘loop‘;
            -webkit-animation-duration: 20s;
            -webkit-animation-iteration-count: infinite;
        }
        @-webkit-keyframes "loop"{
            0% {background: url(http://img5.duitang.com/uploads/blog/201408/12/20140812150016_8NMUU.jpeg) no-repeat;}
            25% {background: url(http://pic29.nipic.com/20130518/9908282_142904524164_2.jpg) no-repeat;}
            50% {background: url(http://uploadfile.huiyi8.com/2014/0605/20140605114503719.jpg) no-repeat;}
            75% {background: url(http://img3.redocn.com/20100322/Redocn_2010032112222793.jpg) no-repeat;}
            100% {background: url(http://uploadfile.huiyi8.com/2014/0605/20140605114447934.jpg) no-repeat;}
        }
    </style>
</head>
<body>
    <div class="myDiv"></div>
</body>
</html>

以上是关于用CSS实现一个简单的幻灯片效果页面的主要内容,如果未能解决你的问题,请参考以下文章

干货CSS3 卡牌旋转滑动效果

Css+jQuery幻灯片的使用教程

CSS3悬停文字幻灯片效果

炫酷 CSS 背景效果的 10 个代码片段

使用CSS伪类和伪对象实现dl;dt+dd在一行显示

使用CSS伪类和伪对象实现dl;dt+dd在一行显示