標籤：位置 http 運行 邊框 它的 時間 ati 代碼 時鐘
遊樂場裡的旋轉木馬是一個非常好玩的項目，尤其是很多女生都非常嚮往。那麼，生活裡的旋轉木馬尚能如此吸引人，何況電腦中的編碼呢？在我看來，電腦中的旋轉木馬更為可愛，雖然我不能身臨其境，但它比我身臨其境卻要更加滿足~
先來一個旋轉動物大聚會：
由於上傳的動圖比較大，就不上傳了。
這個是對這個旋轉木馬截的圖，效果不太明顯，但是隱約可以看到後面存在的小方格，小版塊，其實就是其他的照片。
下面獻上My Code，為了以後更加熟練掌握和熟練運用css，在這裡做上一個筆記。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>圖片旋轉</title> <style type="text/css"> div{ width: 300px; height: 240px; margin:200px auto; animation: rolldiv 10s linear infinite; transform-style: preserve-3d; } @keyframes rolldiv{ from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } } img{ width: 300px; height: 240px; opacity: 0.9; position: absolute; } img:nth-child(1){ transform: rotateY(36deg) translateZ(500px); } img:nth-child(2){ transform: rotateY(72deg) translateZ(500px); } img:nth-child(3){ transform: rotateY(108deg) translateZ(500px); } img:nth-child(4){ transform: rotateY(144deg) translateZ(500px); } img:nth-child(5){ transform: rotateY(180deg) translateZ(500px); } img:nth-child(6){ transform: rotateY(216deg) translateZ(500px); } img:nth-child(7){ transform: rotateY(252deg) translateZ(500px); } img:nth-child(8){ transform: rotateY(288deg) translateZ(500px); } img:nth-child(9){ transform: rotateY(324deg) translateZ(500px); } img:nth-child(10){ transform: rotateY(360deg) translateZ(500px); } body{ transform-style: preserve-3d; -moz-perspective: 2000px; } </style> </head> <body> <div> <img src="img/pic1.jpg" /> <img src="img/pic2.jpg" /> <img src="img/pic3.jpg" /> <img src="img/pic4.jpg" /> <img src="img/pic5.jpg" /> <img src="img/pic6.jpg" /> <img src="img/pic7.jpg" /> <img src="img/pic8.jpg" /> <img src="img/pic9.jpg" /> <img src="img/pic10.jpg" /> </div> </body></html>
這個是在 Hbuilder 裡面寫的代碼，效果不錯。
逐一分析css的屬性：
margin：與上面的邊框的相隔的像素值，與左邊相離像素值。
from {} to {} 這個表示從0°旋轉到360°。
@keyframes rolldiv :這個是對動畫進行定義，其中rolldiv是這個動畫的名稱，方便在後文中進行引用。
在這裡面的animation裡面便進行了引用，10s表示它整個動畫維持的時間總和，linear infinite 這個則是表示它運行無限次，當然你也可以規定次數，比如3，就表示三次。
下面這個transform-style則表示它這個是3d的效果。
opacity表示它的透明度，最上方的照片我定義的為0.9。這個屬性值的範圍是0~1，從全透明變成不透明。
position 表示位置。
在下面來的就是這個我第一次見到的屬性了！
因為我總共10張圖片，然後需要旋轉360°，於是每張圖片旋轉為36°，後面的translateZ(500px),表示距離旋轉中心Z軸500個像素。
而前面的nth-child(1~10)表示每一張子圖片。
style這個表示它是3d的效果。，後面這個perspective我的測試效果是，值越大，整體就越矮。
綜述，這裡面的圖片也可以轉換為video，加上js代碼便可以實現滑鼠置上時，播放視頻等效果。過程也是比較簡單的。
接下來，關於旋轉，這裡列舉時鐘的例子：
首先，不得不說，顏色搭配得不太美觀，但是沒關係，你可以自己嘗試搭配你喜歡的顏色。
代碼展示：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>時鐘</title> <style type="text/css"> .yuan{ width: 500px; height: 500px; background-color: #ddd; border-radius: 50%; border: 6px solid #000000; position: relative; } .miaozhen{ width: 10px; height: 170px; background-color: #000000; position: absolute; left: 245px; top: 114px; animation: animationmiaozhen 60s; animation-iteration-count: infinite; transform-origin:50% 80%; } .fenzhen{ width: 14px; height: 140px; background-color: #A2A2A2; position: absolute; left: 243px; top: 144px; animation: animationfenzhen 3600s; animation-iteration-count: infinite; transform-origin:50% 76%; } .shizhen{ width: 18px; height: 110px; background-color: #16160D; position: absolute; left: 241px; top: 174px; animation: animationshizhen 43200s; animation-iteration-count: infinite; transform-origin:50% 69%; } @keyframes animationmiaozhen{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } @keyframes animationfenzhen{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } @keyframes animationshizhen{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } </style> </head> <body> <div class="yuan"> <div class="shizhen"> </div> <div class="fenzhen"> </div> <div class="miaozhen"> </div> </div> </body></html>
代碼看起來也比較容易寫，難度也不算很大。
left——>左間距，top——>上間距。
animation：動畫定義後的實現及完成時間。
animation-iteration-count：次數，這裡是無限次。
transform-origin：這裡表示旋轉中心點分別在width和height的所佔比例，由於，我在追求美觀，希望針尾長度一致，所以這裡的比例便不同。需要編程人員自己計算，so easy!
然後結合上面提到的旋轉木馬，其實這個就很容易理解了。
心向旋轉巧得木馬 峰迴路轉偶得時鐘 希望總有一款可以讓我們更加瞭解css!
心向旋轉巧得木馬 峰迴路轉偶得時鐘
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
