一、練習一個3D播放器 1.註意點：動畫中如果有和預設樣式同名的屬性，會覆蓋預設樣式中同名的屬性 2.在編寫動畫的時候，固定不變的值寫在前面，需要變化的值寫在後面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl ...
一、練習一個3D播放器
1.註意點：動畫中如果有和預設樣式同名的屬性，會覆蓋預設樣式中同名的屬性
2.在編寫動畫的時候，固定不變的值寫在前面，需要變化的值寫在後面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D187_3DPlayer</title> <style> *{ margin:0px; padding:0px; } body{ background:url("image/taobaoFocusPicture.jpg") no-repeat; background-size:cover;/*這個屬性表示我們的圖片肯定會填滿整個網頁，無論圖片的大小*/ } ul{ height: 200px; width: 200px; /*background-color: red;*/ top:150px; position:absolute; left:50%; margin-left:-100px; transform-style: preserve-3d;/*註意這個3D效果設置在了父元素上*/ /*transform:rotateX(-10deg);!*這一行的目的就是為了讓我們的3D效果顯示更加明顯*!*/ animation:sport 10s linear 0s infinite normal;/*動畫效果*/ } ul li { list-style: none; width: 200px; height: 200px; font-size:60px; text-align: center; line-height:200px; position:absolute; left:0; top:0; } ul li:nth-child(1){ background-color: grey; transform:rotateY(60deg) translateZ(200px);/*分別代表Y軸旋轉60度，沿著Z軸移動200個像素*/ } ul li:nth-child(2){ background-color: blue; transform:rotateY(120deg) translateZ(200px); } ul li:nth-child(3){ background-color: yellow; transform:rotateY(180deg) translateZ(200px); } ul li:nth-child(4){ background-color: green; transform:rotateY(240deg) translateZ(200px); } ul li:nth-child(5){ background-color: skyblue; transform:rotateY(300deg) translateZ(200px); } ul li:nth-child(6){ background-color: purple; transform:rotateY(360deg) translateZ(200px); } ul li image{ width: 200px; height: 200px; border:5px solid skyblue; box-sizing:border-box; } @keyframes sport { from { transform: rotateX(-20deg) rotateY(0deg); } to{ transform: rotateX(-20deg) rotateY(360deg); } } </style> </head> <body> <ul> <li><img src="image/play_tennis2.jpg"></li> <li><img src="image/play_tennis.jpg"></li> <li><img src="image/line_left.jpg"></li> <li><img src="image/26alphabet.jpg"></li> <li><img src="image/content_aside.jpg"></li> <li><img src="image/wangyi_center.jpg"></li> </ul> </body> </html>
三、源碼：
D187_3DPlayer.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D187_3DPlayer.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客園：https://www.cnblogs.com/ruigege0000/
4.歡迎關註微信公眾號：傅里葉變換，個人賬號，僅用於技術交流，後臺回覆“禮包”獲取Java大數據學習視頻禮包
