前端效果(二)

CSS写简单幻灯片效果

制作幻灯片，用css3的animation

1. CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。
2. transform属性将元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
        transition是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果
3.Animation字面的意思就是“动画” 
     属性：animation: name（绑定到选择器的keyframe名称） duration（动画完成一个周期所需要的时间） 
        timing-function(动画的速度曲线：linear（速度相同） ease（先低速后加速） ease-in（低速开始） ease-out（低速结束） ease-in-out（低速开始和结束） 
        cubic-bezier(n,n,n,n)（从 0 到 1 的数值）） delay（动画开始前的延迟）  iteration-count（播放的次数（n（播放次数）|infinite（无限循环）））
        direction （是否循环播放（normal（正常播放）|alternate（轮流反向播放）））fill-mode play-state;
        例子：animation:marginLeft 10s linear 2s infinite 100 reverse  paused
 4.keyframes（关键帧） 
        书写格式为：@keyframes 动画名字｛｝
            根据设置内容从“0%”到“100%”依次编写，注意“0%”一定不能把百分号省略！
            可以使用“from”“to”来代表一个动画是从哪开始，到哪结束（from"就相当于"0%"而"to"相当于"100%",）
5.为了兼容浏览器，记得加各浏览器前缀（“chrome和safira：-webkit-”、“firefox:-moz-”、“opera:-o-”）        

div.ani
<style>
        .ani{
            width:480px;
            height:320px;
            margin:50px auto;
            overflow: hidden;
            /*阴影的水平偏移量、阴影的垂直偏移量、阴影的模糊半径、阴影的颜色*/
            box-shadow:0 0 5px rgba(0,0,0,1);
            /* contain参数 保证图片永远能完整显示在容器中
               cover参数   保证图片永远按比例撑满容器 
            */
            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(https://picsum.photos/360/460?random=1) no-repeat;             
            }
            25% {
                background:url(https://picsum.photos/360/460?random=2) no-repeat;
            }
            50% {
                background:url(https://picsum.photos/360/460?random=3) no-repeat;
            }
            75% {
                background:url(https://picsum.photos/360/460?random=4) no-repeat;
            }
            100% {
                background:url(https://picsum.photos/360/460?random=5) no-repeat;
            }
        }
    </style>