我們制作旋轉(zhuǎn)動畫,，如果旋轉(zhuǎn)的元素是圖案，怎樣旋轉(zhuǎn)都可以，無須多慮,，好看就好,。而要是人物、動物或建筑物,，讓他們不停地翻跟斗就不妥了,。因此，在旋轉(zhuǎn)動畫中,，上述元素是不宜自轉(zhuǎn)的,。請看下圖效果。
代碼：
＜div align="center"＞
＜style type="text/css"＞.背景圖{
border-radius: 50%;
background-
image:url(http://img1.oldkids.cn/upload/260811000/u260810070/2015/11/19/
blog_20151119095423533407.gif);
width: 470px;
height: 470px;
}
.轉(zhuǎn)環(huán)及旋轉(zhuǎn)圖{
width: 470px;
height: 470px;
box-shadow: 0px 0px 0px 15px rgba(150,130,0,1);
border-radius: 50%;
transform-origin: 50% ;
animation: linear mymove 10s infinite;
}
@keyframes mymove{
from {transform:rotate(0deg);}
to {transform:rotate(-360deg);}
}
img:nth-child(1){ position: absolute; top: 0px; left: 180px;
animation: re-rotate 10s infinite linear;
transform-origin:top 50%;
}
img:nth-child(2){ position: absolute; top: 60px; left: 300px;
animation: re-rotate 10s infinite linear;
transform-origin:top 50%;
}
img:nth-child(3){ position: absolute; top: 180px; left: 360px;
animation: re-rotate 10s infinite linear;
transform-origin:top 50%;
}
img:nth-child(4){ position: absolute; top: 300px; left: 300px;
animation: re-rotate 10s infinite linear;
transform-origin:top 50%;
}
img:nth-child(5){ position: absolute; top: 360px; left: 180px;
animation: re-rotate 10s infinite linear;
transform-origin:top 50%;
}
img:nth-child(6){ position: absolute; top: 300px; left: 60px;
animation: re-rotate 10s infinite linear;
transform-origin:top 50%;
}
img:nth-child(7){ position: absolute; top: 180px; left: 0px;
animation: re-rotate 10s infinite linear;
transform-origin:top 50%;
}
img:nth-child(8){ position: absolute; top: 60px; left: 60px;
animation: re-rotate 10s infinite linear;
transform-origin:top 50%;
}
img:nth-child(9){ position: absolute; top: 180px; left: 180px;
animation: re-rotate 10s infinite linear;
transform-origin:top 50%;
}
@keyframes re-rotate{
0%{ transform: rotate(0deg); }
100%{ transform: rotate(360deg); }
}
＜/style＞
＜div class="背景圖"＞
＜div class="轉(zhuǎn)環(huán)及旋轉(zhuǎn)圖"＞＜img src="http://image109.360doc.com/DownloadImg/2022/09/1713/252209246_1_20220917011038802.gif" /＞＜img src="http://image109.360doc.com/DownloadImg/2022/09/1713/252209246_1_20220917011038802.gif" /＞ ＜img src="http://image109.360doc.com/DownloadImg/2022/09/1713/252209246_1_20220917011038802.gif" /＞ ＜img src="http://image109.360doc.com/DownloadImg/2022/09/1713/252209246_1_20220917011038802.gif" /＞ ＜img src="http://image109.360doc.com/DownloadImg/2022/09/1713/252209246_1_20220917011038802.gif" /＞ ＜img src="http://image109.360doc.com/DownloadImg/2022/09/1713/252209246_1_20220917011038802.gif" /＞ ＜img src="http://image109.360doc.com/DownloadImg/2022/09/1713/252209246_1_20220917011038802.gif" /＞ ＜img src="http://image109.360doc.com/DownloadImg/2022/09/1713/252209246_1_20220917011038802.gif" /＞ ＜img src="https://www.oldkids.cn/upload/2018/03/06/blog_20180306215430689.png" /＞＜/div＞ ＜/div＞
＜/div＞
代碼解析：
我的頭像和鴿子都不翻轉(zhuǎn),，其措施是設置兩個旋轉(zhuǎn)方向相反的旋轉(zhuǎn)屬性,。一個是 transform: rotate(360deg) ，另一個是transform: rotate(-360deg),。
再看下面一圖,，與上圖無大區(qū)別，只是讓背景圖慢速旋轉(zhuǎn)了,，中間放了一個動畫（此圖不再另附代碼）,。
|
