生活随笔
收集整理的這篇文章主要介紹了
HTML连载77-3D播放器
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
一、練習(xí)一個3D播放器
1.注意點(diǎn)：動畫中如果有和默認(rèn)樣式同名的屬性，會覆蓋默認(rèn)樣式中同名的屬性
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
;top:150px
;position:absolute
;left:50%
;margin-left:-100px
;transform-style: preserve-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
);}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.歡迎關(guān)注微信公眾號：傅里葉變換，個人賬號，僅用于技術(shù)交流，后臺回復(fù)“禮包”獲取Java大數(shù)據(jù)學(xué)習(xí)視頻禮包
總結(jié)
以上是生活随笔為你收集整理的HTML连载77-3D播放器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
