HTML连载77-3D播放器
2021-04-02 07:27
标签：yellow list osi gre charset abs 需要 doc master 一、练习一个3D播放器 1.注意点：动画中如果有和默认样式同名的属性，会覆盖默认样式中同名的属性 2.在编写动画的时候，固定不变的值写在前面，需要变化的值写在后面 三、源码： 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大数据学习视频礼包 HTML连载77-3D播放器 标签：yellow list osi gre charset abs 需要 doc master 原文地址：https://www.cnblogs.com/ruigege0000/p/12556342.htmlDOCTYPE 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>
