一、练习一个3D播放器
1.注意点：动画中如果有和默认样式同名的属性，会覆盖默认样式中同名的属性
2.在编写动画的时候，固定不变的值写在前面，需要变化的值写在后面
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>D187_3DPlayertitle><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/
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
