css3border旋轉(zhuǎn)時(shí)的動(dòng)畫(huà)怎么應(yīng)用

發(fā)布時(shí)間：2021-09-15 17:26:15 來(lái)源：億速云閱讀：126 作者：柒染欄目：web開(kāi)發(fā)

今天就跟大家聊聊有關(guān)css3border旋轉(zhuǎn)時(shí)的動(dòng)畫(huà)怎么應(yīng)用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

廢話不多說(shuō)了，直接給大家貼代碼了，具體代碼如下所示：

JavaScript

<html>    
<head>    
<title>css3動(dòng)畫(huà)border旋轉(zhuǎn)時(shí)的應(yīng)用。</title>    
<meta charset="UTF-8"/>    
<style type="text/css">    
body{    
background: #ccc;    
}    
.he{    
width: 100px;    
height: 100px;    
margin: 200px auto;    
border: 10px solid black;    
border-left-color: #fff;    
border-radius: 70px;    
animation: namemf 1s linear infinite;    
-webkit-animation:namemf 1s linear infinite;    
-ms-animation: namemf 1s linear infinite;    
}    
@keyframes namemf{    
from{    
transform:rotate(0deg) ;    
}    
to{    
transform: rotate(360deg);    
}    
}    
@-webkit-keyframes namemf{    
from{    
transform:rotate(0deg) ;    
}    
to{    
transform: rotate(360deg);    
}    
}    
@-ms-keyframes namemf{    
from{    
transform:rotate(0deg) ;    
}    
to{    
transform: rotate(360deg);    
}    
}    
</style>    
</head>    
<body>    
<div class="he">    
</div>    
</body>    
</html>

效果圖

css3border旋轉(zhuǎn)時(shí)的動(dòng)畫(huà)怎么應(yīng)用

上面代碼中要注意的地方：
border-radius: 70px;為70px時(shí)div才能顯示為圓形，因?yàn)樯舷伦笥业腷order多出了20px
border-left-color: #fff;可以獨(dú)立設(shè)置一邊的顏色
animation: namemf 1s linear infinite;中l(wèi)inear為勻速運(yùn)動(dòng)　　　　　　　
ease：動(dòng)畫(huà)以低速開(kāi)始，然后加快，在結(jié)束前變慢?！　　　　　　?
ease-in：動(dòng)畫(huà)以低速開(kāi)始　　　　　　　
ease-out：動(dòng)畫(huà)以低速結(jié)束

看完上述內(nèi)容，你們對(duì)css3border旋轉(zhuǎn)時(shí)的動(dòng)畫(huà)怎么應(yīng)用有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問(wèn)一下細(xì)節(jié)

css3border旋轉(zhuǎn)時(shí)的動(dòng)畫(huà)怎么應(yīng)用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽