zoukankan      html  css  js  c++  java
  • 纯css3 轮播图 利用keyframes

    效果:

    关键点:利用keyframes 原理:infinite

    注意点:在处理关键帧动画的时候,注意处理好 总共花费的 animation-duration:time  与每帧延延迟的时间的交错;要让动画显得层次感,处理好 每帧的延迟时间;

    多注意时间的穿插 ;效果更很好;下面只是我的小插图;画的不一定对;

     

    以下是我的代码;有兴趣拷贝来看看,仅作为我的练习记录;关键帧要兼容其他浏览器,自行补充前缀即可;

    下面附上源码;

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>纯css轮播图</title>
    </head>
    
    <body>
    
    <style>
    *{ margin:0 ; padding:0}
    ul,li{ list-style:none; margin:0; padding:0;}
    
    .box,
    .box:after {
        position: fixed;
         100%;
        height: 100%;
        top: 0px;
        left: 0px;
        z-index: 0;
    }
    .box:after {
        content: '';
        background: transparent url(../images/pattern.png) repeat top left;
    }
    .box li span {
         100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: none; background-color:#333;
        opacity: 0;
        z-index: 0;
    	-webkit-backface-visibility: hidden;
        -webkit-animation: imageAnimation 18s linear infinite 0s;
        -moz-animation: imageAnimation 18s linear infinite 0s;
        -o-animation: imageAnimation 18s linear infinite 0s;
        -ms-animation: imageAnimation 18s linear infinite 0s;
        animation: imageAnimation 18s linear infinite 0s;
    }
    .box li div {
        z-index: 1000;
        position: absolute;
        bottom: 30px;
        left: 0px;
         100%;
        text-align: center;
        opacity: 0;
        -webkit-animation: titleAnimation 18s linear infinite 0s;
        -moz-animation: titleAnimation 18s linear infinite 0s;
        -o-animation: titleAnimation 18s linear infinite 0s;
        -ms-animation: titleAnimation 18s linear infinite 0s;
        animation: titleAnimation 18s linear infinite 0s;
    }
    .box li div h3 {
        font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
        font-size: 160px;
        padding: 0 30px;
        line-height: 120px;
        color: rgba(255,255,255,0.8);
    }
    .box li:nth-child(1) span { background-image: url(../images/love5.jpg) }
    .box li:nth-child(2) span {
        background-image: url(../images/love3.jpg);
        -webkit-animation-delay: 6s;
        -moz-animation-delay: 6s;
        -o-animation-delay: 6s;
        -ms-animation-delay: 6s;
        animation-delay: 6s;
    }
    .box li:nth-child(3) span {
        background-image: url(../images/love1.jpg);
        -webkit-animation-delay: 12s;
        -moz-animation-delay: 12s;
        -o-animation-delay: 12s;
        -ms-animation-delay: 12s;
        animation-delay: 12s;
    }
    .box li:nth-child(2) div {
        -webkit-animation-delay: 6s;
        -moz-animation-delay: 6s;
        -o-animation-delay: 6s;
        -ms-animation-delay: 6s;
        animation-delay: 6s;
    }
    .box li:nth-child(3) div {
        -webkit-animation-delay: 12s;
        -moz-animation-delay: 12s;
        -o-animation-delay: 12s;
        -ms-animation-delay: 12s;
        animation-delay: 12s;
    }
    
    
    @-webkit-keyframes imageAnimation { 
    	0% {
    	    opacity: 0;
    	    -webkit-animation-timing-function: ease-in;
    	}
    	11% {
    	    opacity: 1;
    	    -webkit-transform: scale(1.05);
    	    -webkit-animation-timing-function: ease-out;
    	}
    	30% {
    	    opacity: 1;
    	    -webkit-transform: scale(1.1);
    	}
    	35% {
    		opacity: 0;
    		-webkit-transform: scale(1.1) translateY(-20%);
    	}
    	49% {
    		opacity: 0;
    		-webkit-transform: scale(1.1) translateY(-60%);
    	}
    	100% { opacity: 0 ;  -webkit-transform: scale(1.1) translateY(-100%);}
    }
    
    
    @-moz-keyframes imageAnimation { 
    	0% {
    	    opacity: 0;
    	    -moz-animation-timing-function: ease-in;
    	}
    	11% {
    	    opacity: 1;
    	    -moz-transform: scale(1.05);
    	    -moz-animation-timing-function: ease-out;
    	}
    	30% {
    	    opacity: 1;
    	    -moz-transform: scale(1.1);
    	}
    	35% {
    		opacity: 0;
    		-moz-transform: scale(1.1) translateY(-20%);
    	}
    	49% {
    		opacity: 0;
    		-moz-transform: scale(1.1) translateY(-60%);
    	}
    	100% { opacity: 0 ;  -moz-transform: scale(1.1) translateY(-100%);}
    }
    
    
    @keyframes imageAnimation { 
    	0% {
    	    opacity: 0;
    	    animation-timing-function: ease-in;
    	}
    	11% {
    	    opacity: 1;
    	    transform: scale(1.05);
    	    animation-timing-function: ease-out;
    	}
    	30% {
    	    opacity: 1;
    	    transform: scale(1.1);
    	}
    	35% {
    		opacity: 0;
    		transform: scale(1.1) translateY(-20%);
    	}
    	49% {
    		opacity: 0;
    		transform: scale(1.1) translateY(-60%);
    	}
    	100% { opacity: 0 ;  transform: scale(1.1) translateY(-100%);}
    }
    
    @-webkit-keyframes titleAnimation { 
    	0% {
    	    opacity: 0;
    	    -webkit-transform: translateY(-300%);
    	}
    	8% {
    	    opacity: 1;
    	    -webkit-transform: translateY(0%);
    	}
    	22% {
    	    opacity: 1;
    	    -webkit-transform: translateY(0%);
    	}
    	28% {
    	    opacity: 0;
    	    -webkit-transform: translateY(100%);
    	}
    	35% { opacity: 0 }
    	100% { opacity: 0 }
    }
    
    
    @-moz-keyframes titleAnimation { 
    	0% {
    	    opacity: 0;
    	    -moz-transform: translateY(-300%);
    	}
    	8% {
    	    opacity: 1;
    	    -moz-transform: translateY(0%);
    	}
    	22% {
    	    opacity: 1;
    	    -moz-transform: translateY(0%);
    	}
    	28% {
    	    opacity: 0;
    	    -moz-transform: translateY(100%);
    	}
    	35% { opacity: 0 }
    	100% { opacity: 0 }
    }
    
    @keyframes titleAnimation { 
    	0% {
    	    opacity: 0;
    	    transform: translateY(-300%);
    	}
    	8% {
    	    opacity: 1;
    	    transform: translateY(0%);
    	}
    	22% {
    	    opacity: 1;
    	    transform: translateY(0%);
    	}
    	28% {
    	    opacity: 0;
    	    transform: translateY(100%);
    	}
    	35% { opacity: 0 }
    	100% { opacity: 0 }
    }
    
    /* Show at least something when animations not supported */
    .no-cssanimations .box li span{
    	opacity: 1;
    }
    
    
    
    </style>
            <ul class="box">
                <li><span>Image 01</span><div class="title"><h3>第1张</h3></div></li>
                <li><span>Image 02</span><div class="title"><h3>第2张</h3></div></li>
                <li><span>Image 03</span><div class="title"><h3>第3张</h3></div></li>
            </ul>
            
    </body>
    </html>


    其他:
    1,相同参数的可以写在一起;
    2,可以只有to, 也可以只有类似50% 省略0%和100%;因为后面的会重置前面的样式;

    
    
  • 相关阅读:
    bzoj1415 NOI2005聪聪和可可
    Tyvj1952 Easy
    poj2096 Collecting Bugs
    COGS 1489玩纸牌
    COGS1487 麻球繁衍
    cf 261B.Maxim and Restaurant
    cf 223B.Two Strings
    cf 609E.Minimum spanning tree for each edge
    cf 187B.AlgoRace
    cf 760B.Frodo and pillows
  • 原文地址:https://www.cnblogs.com/surfaces/p/4368557.html
Copyright © 2011-2022 走看看