当前位置: 移动技术网 > IT编程>网页制作>CSS > HTML连载77-3D播放器

HTML连载77-3D播放器

2020年03月24日  | 移动技术网IT编程  | 我要评论

一、练习一个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大数据学习视频礼包

 

 

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网