CSS3動態(tài)效果學習筆記

2014/9/30 11:25:02來源：三聯(lián)

　　@keyframe 規(guī)定動畫

　　一般是跟animation一起用

　　animation : 規(guī)定動畫的名字規(guī)定動畫的時間規(guī)定動畫的速度曲線。

　　@keyframe 定義動畫的名稱{ 動畫時長的百分比。{一個或多個合法的 CSS 樣式屬性} }

　　目前大部分瀏覽器都沒有支持@keyframe 和animation;所以要分瀏覽器書寫

　　@keyframe

　　1.safari和chrome瀏覽器

　　@-webkit-keyframes myfrom{

　　from {top:0;}

　　to {top:200px;}

　　}

　　2.Firefox瀏覽器

　　@-moz-keyframes myfrom{

　　from {top:0;}

　　to {top:200px;}

　　}

　　3.Opera瀏覽器

　　@-o-keyframes myfrom{

　　from {top:0;}

　　to {top:200px;}

　　}

　　animation

　　1.safari和chrome瀏覽器

　　@-webkit-animation : myfrom 5s infinite

　　2.Firefox瀏覽器

　　@-moz-animation : myfrom 5s infinite

　　2.Opera瀏覽器

　　@-o-animation : myfrom 5s infinite

　　例子

代碼如下

<!DOCTYPE html>
<html>
<head>
  <title>CSS3動態(tài)效果demo</title>
  <meta charset="utf-8">
  <meta name="keyword" content="CSS3動態(tài)效果demo">
  <meta name="description" content="CSS3動態(tài)效果demo">
  <meta name="author" content="戎sir">
  <link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
  <div class="main">
   <div class="cont">
    <div class="cont1 conns">
     animation
     動畫屬性
     @keyframes：
     規(guī)定動畫
    </div>
    <span data="1">源代碼</span>
   </div>
   <div class="cont">
    <div class="cont2 conns">
     animation-delay：
     規(guī)定動畫何時開始
    </div>
    <span data="2">源代碼</span>
   </div>
   <div class="cont">
    <div class="cont3 conns">
     animation-iteration-count：
     規(guī)定動畫次數(shù)
    </div>
    <span data="3">源代碼</span>
   </div>
   <div class="cont">
    <div class="cont4 conns">
     animation-direction：
     規(guī)定下次動畫逆向
    </div>
    <span data="4">源代碼</span>
   </div>
   <div class="cont">
    <div class="cont5 conns">
    </div>
    <span data="5">源代碼</span>
   </div>
   <div class="cont">
    <div class="cont6 conns">

    </div>
    <span data="6">源代碼</span>
   </div>
   <div class="cont">
    <div class="cont7 conns">

    </div>
    <span data="7">源代碼</span>
   </div>
   <div class="cont">
    <div class="cont8 conns">

    </div>
    <span data="8">源代碼</span>
   </div>
  </div>
  <div class="overbody hidden"></div>
  <div class="commom" id="show1">
   <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont1 conns">animation-delay：規(guī)定動畫何時開始 </div></textarea>
   <textarea readonly="readonly" class="tipcss">
body{background-color: #000;}
.cont{
border: 1px solid #fff;
float: left;
width: 250px;
height: 250px;
position: relative;
box-sizing:border-box;
}
.conns{white-space: initial;}
.cont a{
position: absolute;
top:50px;
left: 5px;
color: #e3e3e3;
word-wrap: break-word;
display: block;
width: 5px;
text-decoration: none;
}
.cont1{
width: 100px;
height:80px;
margin:0 auto;
background-color: #999;
color: #fff;
padding: 10px;
position:relative;
overflow: hidden;
animation:myfrom 5s infinite;
-webkit-animation:myfrom 5s infinite;
}
@-webkit-keyframes myfrom{
from {top:0;}
to {top:150px;}
}
@keyframes myfrom{
from {top:0;}
to {top:150px;}
}</textarea>
  </div>
  <div class="commom" id="show2">
   <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont2 conns">animation 動畫屬性,@keyframes：規(guī)定動畫 </div></textarea>
   <textarea readonly="readonly" class="tipcss">
.cont2{
width: 80px;
height:80px;
margin:0 auto;
background-color: #999;
color: #fff;
padding: 10px;
position:relative;
overflow: hidden;
animation:myfrom 5s infinite;
-webkit-animation:myfrom 5s infinite;
animation-delay:2s;
-webkit-animation-delay:2s;
}
其余css同第一個
</textarea>
  </div>
  <div class="commom" id="show3">
   <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont3 conns">animation-iteration-count：規(guī)定動畫次數(shù)</div></textarea>
   <textarea readonly="readonly" class="tipcss">
.cont3{
width: 80px;
height:80px;
margin:0 auto;
background-color: #999;
color: #fff;
padding: 10px;
position:relative;
overflow: hidden;
animation:myfrom 5s infinite;
-webkit-animation:myfrom 5s infinite;
animation-iteration-count:2;
-webkit-animation-iteration-count:2;
}
其余css同第一個
</textarea>
  </div>
  <div class="commom" id="show4">
   <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont4 conns">animation-direction：規(guī)定下次動畫逆向</div></textarea>
   <textarea readonly="readonly" class="tipcss">
.cont4{
width: 80px;
height:80px;
margin:0 auto;
background-color: #999;
color: #fff;
padding: 10px;
position:relative;
overflow: hidden;
animation:myfrom 5s infinite;
-webkit-animation:myfrom 5s infinite;
animation-direction:alternate;
-webkit-animation-direction:alternate;}
其余css同第一個
</textarea>
  </div>
  <div class="commom" id="show5">
   <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont5 conns"> </div></textarea>
   <textarea readonly="readonly" class="tipcss">
.cont5{
margin: 6em auto;
font-size: 10px;
position: relative;
border: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
-webkit-animation: cont5 1.1s infinite linear;
animation: cont5 1.1s infinite linear;
}
.cont5,.cont5:after{
border-radius: 50%;
width: 10em;
height: 10em;
}
@keyframes cont5{
from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@-webkit-keyframes cont5{
from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}</textarea>
  </div>
  <div class="commom" id="show6">
   <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont6 conns"> </div></textarea>
   <textarea readonly="readonly" class="tipcss">
body{background-color: #000;}
.cont6{
height: 120px;
width: 120px;
margin: 50px auto;
border-radius: 50%;
background:linear-gradient(left,#fff,#000);
background:-webkit-linear-gradient(left,#fff 10%,rgba(255,255,255,0) 40%);
background:-moz-linear-gradient(left,#fff 10%,rgba(255,255,255,0) 40%);
background:-o-linear-gradient(left,#fff 10%,rgba(255,255,255,0) 40%);
background:-ms-linear-gradient(left,#fff 10%,rgba(255,255,255,0) 40%);
position: relative;
-webkit-animation: cont6 1.1s infinite linear;
animation: cont6 1.1s infinite linear;
}
.cont6:before{
height: 50%;
width: 50%;
background:#fff;
content: '';
display: block;
border-radius:100% 0 0 0;
position: absolute;
top:0;
left: 0;
}
.cont6:after{
height: 75%;
width: 75%;
margin: auto;
background:#000;
content:'';
display: block;
border-radius:50%;
position: absolute;
top:0;left: 0;
right: 0;
bottom: 0;
}
@keyframes cont6{
from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
@-webkit-keyframes cont6{
from {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}</textarea>
  </div>
  <div class="commom" id="show7">
   <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont7 conns"> </div></textarea>
   <textarea readonly="readonly" class="tipcss">
body{background-color: #000;}
.cont7,.cont7:before,.cont7:after{
height: 25px;
width: 25px;
border-radius: 50%;
animation:cont7 1.8s infinite ease-in-out;
-webkit-animation:cont7 1.8s infinite ease-in-out;
}
.cont7{
position: relative;
top:0;
margin: 80px auto;
animation-delay:0.2s;
-webkit-animation-delay:0.2s;
}
.cont7:before{
content: '';
position: absolute;
left: -50px;
}
.cont7:after{
content: '';
position: absolute;
left: 50px;
animation-delay:0.4s;
-webkit-animation-delay:0.4s;
}
@keyframes cont7{
0%,
80%,
100% {box-shadow: 0 2.5em 0 -1.3em #ffffff; }
40% {box-shadow: 0 2.5em 0 0 #FFF;}
}
@-webkit-keyframes cont7{
0%,
80%,
100% {box-shadow: 0 2.5em 0 -1.3em #ffffff;}
40% {box-shadow: 0 2.5em 0 0 #FFF;}
}</textarea>
  </div>
  <div class="commom" id="show8">
   <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont8 conns"> </div></textarea>
   <textarea readonly="readonly" class="tipcss">
body{background-color: #000;}
.cont8{
width: 96px;
height: 48px;
border-radius: 50%;
border-bottom:50px solid #fff;
border-top:2px solid #fff;
border-left:2px solid #fff;
border-right:2px solid #fff;
position: relative;
top:0;
margin: 80px auto;
}
.cont8:before{
content: '';
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
border: 18px solid #000;
top:21px;
background-color: #fff;
left: 0;
}
.cont8:after{
content: '';
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
border: 18px solid #fff;
top:21px;
background-color: #000;
right: 0;
}</textarea>
  </div>
  <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="show.js"></script>
</body>
</html>

[教程作者：佚名]

關(guān)鍵詞：動態(tài) 動態(tài)效果效果學習筆記

免責聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請注明出處，素材資料僅供個人學習與參考，請勿用于商業(yè)用途！
本文地址：http://m.likemindfilms.com/tutorial/wd2215.html

上一篇:使用css實現(xiàn)全兼容tooltip提示框

下一篇:CSS中樣式覆蓋優(yōu)先順序詳解

您可能還喜歡

這些是最新的

最熱門的教程

CSS3動態(tài)效果學習筆記

您可能還喜歡

網(wǎng)頁教程分類