DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> CSS3動態效果學習筆記
CSS3動態效果學習筆記
編輯：布局實例     

 　　@keyframe 規定動畫

　　一般是跟animation一起用

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

　　@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動態效果demo</title>
  <meta charset="utf-8">
  <meta name="keyword" content="CSS3動態效果demo">
  <meta name="description" content="CSS3動態效果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：
     規定動畫
    </div>
    <span data="1">源代碼</span>
   </div>
   <div class="cont">
    <div class="cont2 conns">
     animation-delay：
     規定動畫何時開始
    </div>
    <span data="2">源代碼</span>
   </div>
   <div class="cont">
    <div class="cont3 conns">
     animation-iteration-count：
     規定動畫次數
    </div>
    <span data="3">源代碼</span>
   </div>
   <div class="cont">
    <div class="cont4 conns">
     animation-direction：
     規定下次動畫逆向
    </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;">&lt;div class="cont1  conns"&gt;animation-delay：規定動畫何時開始 &lt;/div&gt;</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;">&lt;div class="cont2  conns"&gt;animation 動畫屬性,@keyframes：規定動畫 &lt;/div&gt;</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;">&lt;div class="cont3  conns"&gt;animation-iteration-count： 規定動畫次數&lt;/div&gt;</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;">&lt;div class="cont4  conns"&gt;animation-direction： 規定下次動畫逆向&lt;/div&gt;</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;">&lt;div class="cont5  conns"&gt; &lt;/div&gt;</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;">&lt;div class="cont6  conns"&gt; &lt;/div&gt;</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;">&lt;div class="cont7  conns"&gt; &lt;/div&gt;</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;">&lt;div class="cont8  conns"&gt; &lt;/div&gt;</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>

文章來源：http://rongs100.com/index.php?m=content&c=index&a=show&catid=11&id=36

布局實例
CSS3區域模塊region相關編寫示例
 　　印刷媒體，例如一本雜志或一份報紙，相比網站最大的優勢是完全靈活的安排頁面和段落布局。
可記憶cookie的頁面簡繁體轉換代碼
此方法用JS實現，支持及時轉換，支持cookie記憶 引用方法：<script ty
css控制div置頂置底的例子
  <!DOCTYPE html PUBLIC "-//W3C//DTD

相關文章

布局基本知識布局實例
小編推薦
CSS 平級和兒子級樣式寫法示例 css美化Div邊框的樣式實例 .clearfix:after(清除浮動)中各個屬性及值詳細解說 CSS中的一些百分比相關調試經驗分享 div內table居中實現代碼 CSS樣式:background-position的理解 Hack 只針對IE的寫法 控制DIV中文字絕對居中的簡單方法 純CSS實現鼠標懸停提示的方法 高效整潔CSS代碼
熱門推薦
DIV邊距屬性在Chrome和IE中的區別 DIV+CSS常見的錯誤 css布局中的居中問題 使用CSS3在觸屏上為按鈕實現激活效果 css3實現input輸入框顏色漸變發光效果代碼 CSS定位機制之一：普通流 詳解CSS中的規則聲明 CSS應用基礎教程：應用方式 CSS布局——左定寬度右自適應寬度並且等高布局
大家都在看
用CSS實現改變鼠標形狀的代碼 探討導航的重要性分析門戶網站中導航的表現 javascript實現隨機讀取數組的方法 Javascript動畫效果（4） XML技術上傳文件1 JS設置下拉列表框當前所選值的方法 PassWord輸入框代碼分享 XHTML CSS寫出正規的BLOG
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved