有很多朋友都說(shuō)字體 圖片以及一些簡(jiǎn)單動(dòng)畫(huà) 要做旋轉(zhuǎn)效果 都說(shuō)要用js或者jq 才能去做這個(gè)特效。。

今天我們用css 就直接做旋轉(zhuǎn)特效。話(huà)不多說(shuō) 直接上代碼

?css樣式

??????? div{
??????????? width:120px;
??????????? height:120px;
??????????? line-height:120px;
??????????? margin: 20px;
??????????? background-color: #5cb85c;
??????????? float: left;
??????????? font-size: 12px;
??????????? text-align: center;
??????????? color:orangered;
??????? }

?????? /*效果一：360°旋轉(zhuǎn) 修改rotate(旋轉(zhuǎn)度數(shù))*/
??????? .img1 {
??????????? transition: All 0.4s ease-in-out;
??????????? -webkit-transition: All 0.4s ease-in-out;
??????????? -moz-transition: All 0.4s ease-in-out;
??????????? -o-transition: All 0.4s ease-in-out;
??????? }

??????? .img1:hover {
??????????? transform: rotate(360deg);
??????????? -webkit-transform: rotate(360deg);
??????????? -moz-transform: rotate(360deg);
??????????? -o-transform: rotate(360deg);
??????????? -ms-transform: rotate(360deg);

??????? }

<div class="img1">效果一：360°旋轉(zhuǎn) </div>

這樣旋轉(zhuǎn)代碼就出來(lái)了

總結(jié)

以上是生活随笔為你收集整理的css动画旋转代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。