3d转换——3d播放器

最新推荐文章于 2022-10-03 12:50:43 发布

从一至二

最新推荐文章于 2022-10-03 12:50:43 发布

阅读量362

点赞数

分类专栏： html学习记录文章标签： HTML

本文链接：https://blog.csdn.net/weixin_38158043/article/details/83020036

版权

html学习记录专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .five{
            width: 200px;
            height: 200px;
            /*background-color: pink;*/
            position: absolute;
            bottom:100px;
            margin-top:100px;
            left: 50%;
            margin-left: -100px;
            transform-style:preserve-3d;
            /*transform:rotateX(-5deg);*/
            animation:moveJ 6s linear 0s infinite normal;
        }
        @keyframes moveJ {
            /*
            注意点：
            1.动画中如果有和默认样式中同名的属性，会覆盖默认样式中同名的属性
            2.在编写动画的时候，固定不变的值写在前面，需要变化的值写在后面
            */
            from{
                transform:rotateX(-5deg) rotateY(0deg);
            }
            to{
                transform:rotateX(-5deg) rotateY(360deg);
            }
        }
        .five li{
            list-style: none;
            width: 200px;
            height: 200px;
            font-size:50px;
            text-align: center;
            line-height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            background-color: black;
        }
        .five li:nth-child(1){
            /*background-color: red;*/
            transform: rotateY(60deg) translateZ(200px);
        }
        .five li:nth-child(2){
            /*background-color: blue;*/
            transform: rotateY(120deg) translateZ(200px);
        }
        .five li:nth-child(3){
            /*background-color: yellow;*/
            transform: rotateY(180deg) translateZ(200px);
        }
        .five li:nth-child(4){
            /*background-color:green;*/
            transform: rotateY(240deg) translateZ(200px);
        }
        .five li:nth-child(5){
            /*background-color: white;*/
            transform: rotateY(300deg) translateZ(200px);
        }
        .five li:nth-child(6){
            /*background-color: gray;*/
            transform: rotateY(360deg) translateZ(200px);
        }
        .five li img{
            width: 200px;
            height: 200px;
            border: 5px solid pink;
            box-sizing: border-box;
        }
        .five:hover{
            animation-play-state:paused;
        }
        .five:hover li img{
            opacity: 0.5;
        }
        .five li:hover img{
            opacity: 1;
            width: 220px;
            height: 220px;

        }
        .doge{
            width: 80px;
            height: 86px;
            position: absolute;
            left: 100px;
            bottom: 100px;
            animation:good 10s linear 0s infinite normal;
        }
        @keyframes good {
            0%{
                left: 100px;
                bottom: 100px;
                opacity: 1;
            }
            20%{
                left: 300px;
                bottom: 300px;
                opacity:0;
            }
            40%{
                left: 500px;
                bottom: 500px;
                opacity: 1;
            }
            60%{
                left: 800px;
                bottom: 300px;
                opacity: 0;
            }
            80%{
                left: 1000px;
                bottom: 100px;
                opacity: 1;
            }
            100%{
                left: 800px;
                bottom: -200px;
            }
        }
    </style>

</head>
<body>

<ul class="five">
    <li><img src="image/Jay1.jpg" alt=""></li>
    <li><img src="image/Jay2.jpg" alt=""></li>
    <li><img src="image/Jay3.jpg" alt=""></li>
    <li><img src="image/Jay4.jpg" alt=""></li>
    <li><img src="image/Jay5.jpg" alt=""></li>
    <li><img src="image/Dog.jpg" alt=""></li>
</ul>
<img src="image/kuaihuo.jpg" class="doge">
<audio src="../music/华语群星%20-%20稻香.mp3" autoplay="autoplay" loop="loop"></audio>

</body>
</html>

从一至二

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3d转换——3d播放器

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .five{ width
复制链接

扫一扫