CSS3動(dòng)態(tài)效果學(xué)習(xí)筆記

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 腳本欄目

來源：易賢網(wǎng) 閱讀：1330 次日期：2015-03-02 11:11:03

溫馨提示：易賢網(wǎng)小編為您整理了“CSS3動(dòng)態(tài)效果學(xué)習(xí)筆記”,方便廣大網(wǎng)友查閱！

@keyframe 規(guī)定動(dòng)畫

一般是跟animation一起用

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

@keyframe 定義動(dòng)畫的名稱{ 動(dòng)畫時(shí)長(zhǎng)的百分比。{一個(gè)或多個(gè)合法的 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動(dòng)態(tài)效果demo</title>

</head>

<body>

animation

動(dòng)畫屬性

@keyframes：

規(guī)定動(dòng)畫

</div>

</div>

animation-delay：

規(guī)定動(dòng)畫何時(shí)開始

</div>

</div>

animation-iteration-count：

規(guī)定動(dòng)畫次數(shù)

</div>

</div>

animation-direction：

規(guī)定下次動(dòng)畫逆向

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont1 conns">animation-delay：規(guī)定動(dòng)畫何時(shí)開始 </div></textarea>

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>

<textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont2 conns">animation 動(dòng)畫屬性,@keyframes：規(guī)定動(dòng)畫 </div></textarea>

.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同第一個(gè)

</textarea>

</div>

<textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont3 conns">animation-iteration-count：規(guī)定動(dòng)畫次數(shù)</div></textarea>

.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同第一個(gè)

</textarea>

</div>

<textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont4 conns">animation-direction：規(guī)定下次動(dòng)畫逆向</div></textarea>

.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同第一個(gè)

</textarea>

</div>

.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>

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>

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>

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>

</body>

</html>

文章來源：

更多信息請(qǐng)查看IT技術(shù)專欄

更多信息請(qǐng)查看腳本欄目

上一篇：IE9下DIV本來應(yīng)該居中的結(jié)果顯示為居左

下一篇：瀏覽器如何判斷css優(yōu)先級(jí)

易賢網(wǎng)手機(jī)網(wǎng)站地址：CSS3動(dòng)態(tài)效果學(xué)習(xí)筆記

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請(qǐng)考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀腳本欄目

Bottle框架中的裝飾器類和描述符應(yīng)用詳解10月30日

Python探索之SocketServer詳解10月30日

Python探索之實(shí)現(xiàn)一個(gè)簡(jiǎn)單的HTTP服務(wù)器10月30日

python探索之BaseHTTPServer-實(shí)現(xiàn)Web服務(wù)器介紹10月30日

13個(gè)最常用的Python深度學(xué)習(xí)庫介紹10月30日

深入理解Python中的*重復(fù)運(yùn)算符10月30日

python logging日志模塊詳解10月30日

System表空間不足的報(bào)警問題淺析10月22日

Android開發(fā)自定義TextView省略號(hào)樣式的方法10月22日

MySQL 清除表空間碎片的實(shí)例詳解10月22日

Ubuntu下MySQL安裝及配置遠(yuǎn)程登錄教程10月22日

Python 2.x如何設(shè)置命令執(zhí)行的超時(shí)時(shí)間實(shí)例10月22日

windows 64位下redis安裝教程10月22日

Android 自定義 HorizontalScrollView 打造多圖片OOM 的橫向滑動(dòng)效果10月22日

淺談Node Inspector 代理實(shí)現(xiàn)10月22日

java web開發(fā)之購(gòu)物車功能實(shí)現(xiàn)示例代碼10月22日

Android開發(fā)中GridView用法示例10月22日

Django ORM框架的定時(shí)任務(wù)如何使用詳解10月22日

SpringMail使用過程中的報(bào)錯(cuò)解決辦法10月22日

Android 使用自定義RecyclerView控件實(shí)現(xiàn)Gallery效果10月22日

易賢網(wǎng)移動(dòng)網(wǎng)站

2026上岸·考公考編培訓(xùn)報(bào)班

報(bào)班類型
姓名
手機(jī)號(hào)
驗(yàn)證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合