css3小技术

标签：

1.如何用CSS3控制图片的依次播放之后继续循环播放。

　<div class="ld_txt">

　　<div class="txt_icon txtone"></div>
　　<div class="txt_icon txttwo"></div>
　　<div class="txt_icon txtthree"></div>

</div>

<style>

　　.ld_txt{width:36px;height:306px;position:absolute;top:50%;left:50%;margin:-153px 0 0 -18px;}

　　.txt_icon{background:url(../images/txt_icon.png) no-repeat;background-size:36px 34px;}

　　.txtone{top:0;left:0;background-position:0 0;}

　　.txttwo{top:36px;left:0;background-position:0 -36px;}

　　.txtthree{top:68px;left:0;background-position:0 -68px;}

.txtone{-webkit-animation:a_one 1.5s linear 3s infinite; opacity:0;}
.txttwo{-webkit-animation:a_two 1.5s linear 3s infinite; opacity:0;}
.txtthree{-webkit-animation:a_three 1.5s linear 3s infinite; opacity:0;}

@-webkit-keyframes a_txtone{

　　0%{opacity:0;}

　　9%{opacity:1;}

　　10%{opacity:1;}

　　80%{opacity:1;}

　　81%{opacity:0;}

　　100%{opacity:0;}

}

@-webkit-keyframes a_txtone{

　　0%{opacity:0;}

　　29%{opacity:0;}

　　30%{opacity:1;}

　　80%{opacity:1;}

　　81%{opacity:0;}

　　100%{opacity:0;}

}

@-webkit-keyframes a_txtthree{

　　0%{opacity:0;}

　　39%{opacity:0;}

　　40%{opacity:1;}

　　80%{opacity:1;}

　　81%{opacity:0;}

　　100%{opacity:0;}

}

2.如何让图片翻转

<div class="box">

　　<div class="coin">

　　　　<div class="coin_inner"></div>

　　</div>

</div>

<style>

　　.box{width:200px;height:200px;backgroung:#000;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;}

　　.coin{width:74px;height:74px;position:absolute;top:-120px;left:160px;}

　　.coin_inner{width:74px;height:74px;background:url(../images/coin.png) no-repeat;backgroung-size:100%;position:absolute;top:0;left:0;

.coin{-webkit-animation:a_wu 1.4s ease-out 0s both;}
.coin_inner{-webkit-animation:a_wu_inner 0.2s linear 0s 5;}

@-webkit-keyframes a_wu_inner{
　　0%{
　　　　-webkit-transform:scale(1,-1);

　　}
　　100%{
　　　　-webkit-transform:scale(1,1);
　　}
}

@-webkit-keyframes a_wu{
　　0%{
　　　　-webkit-transform:translate(0,-106px);
　　}
　　100%{
　　　　-webkit-transform:translate(0,0px);
　　}
}

3.画空心圆按钮

<div class=“circlebox">

　　<div class="circle></div>

　　<div class="circle_inner"></div>

</div>

<style>

.circlebox{width:90px;height:90px;background:#000;position:absolute;top:50%;left:50%;margin:-45px 0 0 -45px;}

.circle{width:90px;height:90px;border:1px solid #fff;border-radius:100%;}

.circle_inner{width:64px;height:64px;border:4px solid #fff;border-radius:100%;position:absolute;top:50%;left:50%;margin:-32px 0 0 -32px;}

css3小技术

标签：

原文地址：http://www.cnblogs.com/hxp0721/p/hxp.html