html/css发光盒子模型

最新推荐文章于 2023-09-05 16:21:14 发布
爱哭的小阿秋
最新推荐文章于 2023-09-05 16:21:14 发布
阅读量563
点赞数
文章标签： css html
本文链接：https://blog.csdn.net/m0_73935981/article/details/127947527
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background: black;
        }

        /* .qwe{
            width: 500px;
            height: 500px;
            background: lightpink;
            margin: 200px auto;
        } */
        //盒子
        .out{
            width: 200px;
            height: 200px;
            margin: 200px auto;
           
            /* background: lawngreen; */
            /* position: absolute; */
            /* position: relative; */
            transform-style: preserve-3d;
            animation: qwe 10s linear infinite;
        }
        //统一设置盒子面大小与阴影
        .out>div{
            width: 200px;
            height: 200px;
            position: absolute;
            box-shadow: 0 0 50px 25px currentColor;
        }
        //外盒子面1
        .out_front{
            color:violet ;
            background: violet;
            transform: translateZ(200px);
        }
        //外盒子面2
        .out_back{
            color: darkorange;
            background: darkorange;
            transform: translateZ(-200px) rotateY(180deg);
        }
        //外盒子面3
        .out_left{
            color: lightgreen;
            background: lawngreen;
            transform: translateX(200px) rotateY(90deg);
        }
        //外盒子面4
        .out_right{
            color: blanchedalmond;
            background: blanchedalmond;
            transform: translateX(-200px) rotateY(-90deg);
        }
        //外盒子面5
        .out_top{
            color: red;
            background: red;
            transform: translateY(200px) rotateX(90deg);
            
        }
        //外盒子面6
        .out_bottom{
            color: gold;
            background: gold;
            transform: translateY(-200px) rotateX(90deg);
        }

        //中部盒子面1
        .out_front1{
            background: violet;
            transform: translateZ(150px) 
            /* rotateX(45deg) */

            ;
        }
        //中部盒子面2
        .out_back1{
            background: darkorange;
            transform: translateZ(-150px) 
            /* rotateY(-45deg) */
            rotateY(180deg)
            ;
        }
        //中部盒子面3
        .out_left1{
            background: lawngreen;
            transform: translateX(150px) 
            /* rotateY(45deg) */
            rotateY(-90deg);
        }
        //中部盒子面4
        .out_right1{
            background: blanchedalmond;
            transform: translateX(-150px)
             /* rotateY(-45deg) */
             rotateY(90deg)
             ;
        }
        //中部盒子面5
        .out_top1{
            background: red;
            transform: translateY(150px)
             /* rotateX(45deg) */
             rotateX(-90deg)
             ;
            
        }
        //中部盒子面6
        .out_bottom1{
            background: gold;
            transform: translateY(-100px) 
            /* rotateX(45deg) */
            rotateY(90deg)
            ;
        }

        //内部盒子面1
        .out_front2{
            background: violet;
            transform: translateZ(100px) rotateX(0deg);
        }
        //内部盒子面2
        .out_back2{
            background: darkorange;
            transform: translateZ(-100px) rotateY(180deg);
        }
        //内部盒子面3
        .out_left2{
            background: lawngreen;
            transform: translateX(100px) rotateY(-90deg);
        }
        //内部盒子面4
        .out_right2{
            background: blanchedalmond;
            transform: translateX(-100px) rotateY(-90deg);
        }
        //内部盒子面5
        .out_top2{
            background: red;
            transform: translateY(100px) rotateX(90deg);
            
        }
        //内部盒子面6
        .out_bottom2{
            background: gold;
            transform: translateY(-100px) rotateX(-90deg);
        }

        //设置鼠标指在盒子模型上时的事件
        .out:hover *{
            background: #9a0ddc;
            background-image: url("E:/图片/微信/snowma.jpg");
            background-size: 200px;
            box-shadow: 0px 0px 50px 25px aqua;
            transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        }
        //绑定动画
        @keyframes qwe{
    0%{
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    50%{
        transform: rotateX(135deg) rotateY(145deg) rotateZ(155deg);
    }
    100%{
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
} 
    </style>
</head>
<body>
    <div class="qwe">
        <div class="out">
            //外部盒子面
            <div class="out_front"></div>
            <div class="out_back"></div>
            <div class="out_left"></div>
            <div class="out_right"></div>
            <div class="out_top"></div>
            <div class="out_bottom"></div>

            中部盒子面
            <div class="out_front1"></div>
            <div class="out_back1"></div>
            <div class="out_left1"></div>
            <div class="out_right1"></div>
            <div class="out_top1"></div>

            内部盒子面
            <div class="out_bottom2"></div>
            <div class="out_front2"></div>
            <div class="out_back2"></div>
            <div class="out_left2"></div>
            <div class="out_right2"></div>
            <div class="out_top2"></div>
            <div class="out_bottom"></div>
        </div>
    </div>
</body>
</html>