首先要知道什么是CSS3動(dòng)畫？然后才能做出自己想要的動(dòng)畫效果。下面會(huì)通過(guò)3個(gè)簡(jiǎn)單的Loading動(dòng)畫效果來(lái)對(duì)CSS3 animation動(dòng)畫做一個(gè)簡(jiǎn)單介紹，希望對(duì)你有用。
動(dòng)畫是使元素從一種樣式逐漸變化為另一種樣式的效果。
您可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。
使用百分比來(lái)規(guī)定變化發(fā)生的時(shí)間，或用關(guān)鍵詞 "from" 和 "to"，等同于 0% 和 100%。
0% 是動(dòng)畫的開始，100% 是動(dòng)畫的完成。
要?jiǎng)?chuàng)建CSS3動(dòng)畫，那么首先就要了解@keyframes規(guī)則。@keyframes規(guī)則是創(chuàng)建動(dòng)畫。 @keyframes規(guī)則內(nèi)指定一個(gè)CSS樣式和動(dòng)畫將逐步從目前的樣式更改為新的樣式。
當(dāng)在 @keyframes 創(chuàng)建動(dòng)畫，把它綁定到一個(gè)選擇器，否則動(dòng)畫不會(huì)有任何效果。
指定至少這兩個(gè)CSS3的動(dòng)畫屬性綁定向一個(gè)選擇器：規(guī)定動(dòng)畫的名稱；規(guī)定動(dòng)畫的時(shí)長(zhǎng)。
css3動(dòng)畫屬性
Loading動(dòng)畫1：
點(diǎn).gif
<!-- html代碼 總共8個(gè)點(diǎn) --> <div class="point-loading"> <span class="point"></span> <span class="point"></span> <span class="point"></span> <span class="point"></span> <span class="point"></span> <span class="point"></span> <span class="point"></span> <span class="point"></span> </div>
/*css樣式代碼*//*定義動(dòng)畫*/@keyframes pointLoading { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(.3); opacity: 0.5; }}/*定義樣式*/.point-loading { width: 100px; height: 100px; position: relative; margin: 0 auto; margin-top: 150px; margin-bottom: 100px;}.point-loading .point { width: 20px; height: 20px; border-radius: 50%; background: lightgreen; position: absolute; animation-name:pointLoading; /*綁定動(dòng)畫*/ animation-duration:1s; /*綁定動(dòng)畫完成一個(gè)周期所用時(shí)間*/ animation-iteration-count:infinite; /*動(dòng)畫播放次數(shù) 默認(rèn)是1，infinite無(wú)限次播放*/}/*nth-child:選擇器匹配屬于其父元素的第 N 個(gè)子元素；animation-delay:動(dòng)畫延遲播放*/.point-loading .point:nth-child(1) { left: 0; top: 50%; margin-top: -10px; animation-delay: 0.13s;}.point-loading .point:nth-child(2) { left: 14px; top: 14px; animation-delay: 0.26s;}.point-loading .point:nth-child(3) { left: 50%; top: 0; margin-left: -10px; animation-delay: 0.39s;}.point-loading .point:nth-child(4) { top: 14px; right: 14px; animation-delay: 0.52s;}.point-loading .point:nth-child(5) { right: 0; top: 50%; margin-top: -10px; animation-delay: 0.65s;}.point-loading .point:nth-child(6) { right: 14px; bottom: 14px; animation-delay: 0.78s;}.point-loading .point:nth-child(7) { bottom: 0; left: 50%; margin-left: -10px; animation-delay: 0.91s;}.point-loading .point:nth-child(8) { bottom: 14px; left: 14px; animation-delay: 1.04s;}Loading動(dòng)畫2：
圓環(huán).gif
<!-- html代碼 --><div class="loading"></div>
/*css代碼*//*首先是定義動(dòng)畫效果*/@keyframes rotateLoading { from { transform:rotate(0deg); } 100% { transform: rotate(360deg); }}/*定義基本樣式，綁定動(dòng)畫，定義動(dòng)畫屬性*/.loading { margin: 50px auto; width: 100px; height: 100px; border-radius: 50%; border: 10px solid rgba(0, 0, 0, 0.2); border-top-color: #000; position: relative; animation-name: rotateLoading; animation-timing-function: linear; animation-duration: 1.1s; animation-iteration-count: infinite;}Loading動(dòng)畫3：
柱狀.gif
<!--html代碼 共5個(gè)柱狀 --> <div class="pillar-loading"> <span class="pillar"></span> <span class="pillar"></span> <span class="pillar"></span> <span class="pillar"></span> <span class="pillar"></span> </div>
/*css代碼*/@keyframes pillarLoading { 0%, 100% { background: lightgreen; } 50% { transform: scaleY(1.75); background: lightblue; }}.pillar-loading { margin: 150px auto; width: 60px; display: flex; justify-content: space-between;}.pillar-loading .pillar { width: 8px; height: 40px; border-radius: 4px; background: lightgreen; animation-name: pillarLoading; animation-iteration-count: infinite; animation-duration: 1s; animation-timing-function: ease;}.pillar-loading .pillar:nth-child(2){ animation-delay: 0.2s;}.pillar-loading .pillar:nth-child(3){ animation-delay: 0.4s;}.pillar-loading .pillar:nth-child(4){ animation-delay: 0.6s;}.pillar-loading .pillar:nth-child(5){ animation-delay: 0.8s;}以上3個(gè)動(dòng)畫是Animation動(dòng)畫的簡(jiǎn)單示例。
下面再說(shuō)一個(gè)動(dòng)畫必備屬性 transform。
transform 本意是變形，變換之意，在 CSS 中使用該屬性可對(duì)元素進(jìn)行移動(dòng)（translate）、旋轉(zhuǎn)（rotate）、縮放（scale）、傾斜（skew）等效果。因其有著各種特效及優(yōu)良的性能，所以成為動(dòng)畫的標(biāo)配。
** 轉(zhuǎn)換方法**
transform轉(zhuǎn)換方法
一個(gè)簡(jiǎn)單的小球動(dòng)畫，鼠標(biāo)移到小球上或者空白框內(nèi)，小球開始做動(dòng)畫，鼠標(biāo)移出，動(dòng)畫停止。
小球動(dòng)畫
<!-- html代碼 --><div class="box"> <div class="circle"></div> </div>
.box { width: 600px; height: 200px; border: 1px solid #ccc; background: #fff; margin: 50px,auto}.circle { width: 50px; height: 50px; background: blue; border-radius: 50%; margin: 75px,0; transition: all 2s /*2s完成*/}.box:hover .circle { background: red; transform: translate(550px,0) /*沿x軸偏移550px*/}再來(lái)一個(gè)稍微難一點(diǎn)的。
transform動(dòng)畫
<!-- html代碼 --><a href="https://y.qq.com/n/yqq/album/002JRl3m16wLPL.html" class="playlist-item"> <div class="item-bd"> <img class="item-img" src="http://coding.imweb.io/img/p3/transition-hover.jpg" alt=""> <i class="icon-play"></i> </div> <div class="item-ft"> <h3 class="item-tt">漂洋過(guò)海來(lái)看你 OST 原聲輯</h3> <p class="item-author">嚴(yán)藝丹</p> </div> </a>
/*css樣式代碼*/.playlist-item { display: block; margin-top: 100px; width: 300px; background: rgba(0, 0, 0, .6);}.playlist-item:hover { background: #31c27c;}.playlist-item .item-bd { overflow: hidden; position: relative;}.playlist-item .item-img { width: 100%; transition:all 0.75s;}.playlist-item .icon-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.7); width: 70px; height: 70px; background: url(http://coding.imweb.io/img/p3/transition-cover_play.png) no-repeat; opacity: 0;}.playlist-item .item-bd:hover .item-img { transform:scale(1.1);}.playlist-item .item-bd:hover .icon-play { opacity: 0.8; transform: translate(-50%, -50%) scale(1);}.playlist-item .item-ft { color: #fff; padding: 15px 10px; text-align: center;}.playlist-item .item-tt { font-size: 16px; position: relative; display: inline-block; vertical-align: middle;}.playlist-item .item-tt::after { content: "..."; width: 18px; height: 18px; font-size: 12px; color: #fff; border-radius: 50%; border: 2px solid #fff; position: absolute; right: -25px; top: 50%; transform: translate(0, -50%); line-height: 0.6; box-sizing: border-box; opacity: 0; transition:all 0.75s;}.playlist-item .item-author { color: #999;}.playlist-item:hover .item-author { color: #c1e9d5;}.playlist-item:hover .item-tt::after { opacity:1;}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
