CSS3怎么實(shí)現(xiàn)簡(jiǎn)易加載中動(dòng)畫(huà)

這篇文章主要介紹了CSS3怎么實(shí)現(xiàn)簡(jiǎn)易加載中動(dòng)畫(huà)的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇CSS3怎么實(shí)現(xiàn)簡(jiǎn)易加載中動(dòng)畫(huà)文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

　　1.簡(jiǎn)易加載中

　　@keyframes myfirst

　　{

　　from{transform: rotate(0deg)}to{transform: rotate(360deg)}

　　}

　　.loading{

　　animation: myfirst 1.5s infinite linear;//infinite控制執(zhí)行次數(shù)這里一直執(zhí)行，linear執(zhí)行速度，勻速

　　border: 16px solid #f3f3f3;

　　border-radius: 50%;

　　border-top:16px solid blue;

　　width: 120px;

　　height: 120px;

　　}

　　<div class="loading"></div>

　　2.簡(jiǎn)易進(jìn)度條

　　.move {

　　width: 0px;

　　height: 10px;

　　animation: moveHover 5s infinite linear;

　　}

　　<div class="move"></div>

　　3.過(guò)渡屬性

　　.change

　　{

　　transition: width 2s;

　　font-size: 10px;

　　width: 100px;

　　height: 20px;

　　background: yellow;

　　-moz-transition: width 2s;    /* Firefox 4 */

　　-webkit-transition: width 2s;    /* Safari 和 Chrome */

　　-o-transition: width 2s;    /* Opera */

　　}

　　.change:hover

　　{

　　width: 500px;

　　}

　　<div class="change">鼠標(biāo)滑過(guò)</div>

　　.bigger{

　　font-size: 20px;

　　width: 0;

　　height: 0;//scale根據(jù)寬高變大，必須設(shè)置width和height

　　background: #2A9F00;

　　transition: transform 5s;

　　}

　　.bigger:hover{

　　transform: scale(10);

　　}

　　<div class="bigger">大</div>

關(guān)于“CSS3怎么實(shí)現(xiàn)簡(jiǎn)易加載中動(dòng)畫(huà)”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“CSS3怎么實(shí)現(xiàn)簡(jiǎn)易加載中動(dòng)畫(huà)”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。