HTML连载77-3D播放器

最新推荐文章于 2023-01-15 18:26:55 发布

睿里睿气

最新推荐文章于 2023-01-15 18:26:55 发布

阅读量326

点赞数

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.csdn.net/weixin_44630050/article/details/105062085

版权

HTML 专栏收录该内容

86 篇文章 2 订阅

订阅专栏

一、练习一个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>

77.1

三、源码：
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大数据学习视频礼包
77.2

睿里睿气

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML连载77-3D播放器

一、练习一个3D播放器1.注意点：动画中如果有和默认样式同名的属性，会覆盖默认样式中同名的属性2.在编写动画的时候，固定不变的值写在前面，需要变化的值写在后面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>D187_3DPla...
复制链接

扫一扫