一, 练习一个 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/
来源: http://www.bubuko.com/infodetail-3475455.html