雨

Page Title
<style><!--
ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            margin: 150px auto;
            position: relative;
            font-size: 50px;
            transform-style: preserve-3d;
            /*动画效果*/
            animation: rotate 10s linear infinite;
        }
        .box>div{
            width: 300px;
            height: 300px;
            position: absolute;
        }
        li{
            float: left;
            width: 90px;
            height: 90px;
            margin: 5px;
            border-radius: 20px;
            line-height: 90px;
            text-align: center;
        }
    .img1{
        float: left;
        width: 90px;
            height: 90px;
        margin: 5px;
        border-radius: 20px;
        line-height: 90px;
        text-align: center;
        }
        .dv1 li{
            background-color: orange;
            transform: skewZ(60deg);
        }
        .dv1{
            background-color: transparent;
            transform: rotateY(90deg) translateZ(150px);
        }
        .dv2{
            background-color: transparent;
            transform: rotateY(-90deg) translateZ(150px);
        }
        .dv3{
            background-color: transparent;
            transform: rotateX(90deg) translateZ(150px);
        }
        .dv4{
            background-color: transparent;
            transform: rotateX(-90deg) translateZ(150px);
        }
        .dv5{
            background-color: transparent;
            transform:translateZ(150px);
        }
        .dv6{
            background-color: transparent;
            transform:translateZ(-150px);
        }
  
        .dv2 li{
            background-color: green;
        }
        .dv3 li{
            background-color: greenyellow;
        }
        .dv4 li{
            background-color: palevioletred;
        }
        .dv5 li{
            background-color: pink;
        }
        .dv6 li{
            background-color: yellow;
        }
        @keyframes rotate{
            0%{
                transform: rotateY(0deg) rotateX(0deg);
            }
            100%{
                transform: rotateY(135deg) rotateX(45deg);
            }
        }
--></style>
<div class="box"><details>
</details>
<div class="dv1">
<ul>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210414978-1908480260.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210455370-951132558.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210515386-1606328461.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210531492-1893984624.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210546106-93795288.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210559659-687635022.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210611844-2140797362.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210627736-1439441421.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210643210-1965363097.jpg
" alt="" class="img1" /></li>
</ul>
</div>
<div class="dv2">
<ul>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210414978-1908480260.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210455370-951132558.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210515386-1606328461.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210531492-1893984624.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210546106-93795288.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210559659-687635022.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210611844-2140797362.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210627736-1439441421.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210643210-1965363097.jpg
" alt="" class="img1" /></li>
</ul>
</div>
<div class="dv3">
<ul>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210414978-1908480260.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210455370-951132558.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210515386-1606328461.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210531492-1893984624.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210546106-93795288.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210559659-687635022.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210611844-2140797362.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210627736-1439441421.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210643210-1965363097.jpg
" alt="" class="img1" /></li>
</ul>
</div>
<div class="dv4">
<ul>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210414978-1908480260.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210455370-951132558.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210515386-1606328461.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210531492-1893984624.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210546106-93795288.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210559659-687635022.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210611844-2140797362.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210627736-1439441421.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210643210-1965363097.jpg
" alt="" class="img1" /></li>
</ul>
</div>
<div class="dv5">
<ul>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210414978-1908480260.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210455370-951132558.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210515386-1606328461.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210531492-1893984624.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210546106-93795288.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210559659-687635022.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210611844-2140797362.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210627736-1439441421.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210643210-1965363097.jpg
" alt="" class="img1" /></li>
</ul>
</div>
<div class="dv6">
<ul>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210414978-1908480260.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210455370-951132558.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210515386-1606328461.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210531492-1893984624.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210546106-93795288.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210559659-687635022.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210611844-2140797362.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210627736-1439441421.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210643210-1965363097.jpg
" alt="" class="img1" /></li>
</ul>
</div>
</div>

Page Title
<style><!--
ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            margin: 150px auto;
            position: relative;
            font-size: 50px;
            transform-style: preserve-3d;
            /*动画效果*/
            animation: rotate 10s linear infinite;
        }
        .box>div{
            width: 300px;
            height: 300px;
            position: absolute;
        }
        li{
            float: left;
            width: 90px;
            height: 90px;
            margin: 5px;
            border-radius: 20px;
            line-height: 90px;
            text-align: center;
        }
    .img1{
        float: left;
        width: 90px;
            height: 90px;
        margin: 5px;
        border-radius: 20px;
        line-height: 90px;
        text-align: center;
        }
        .dv1 li{
            background-color: orange;
            transform: skewZ(60deg);
        }
        .dv1{
            background-color: transparent;
            transform: rotateY(90deg) translateZ(150px);
        }
        .dv2{
            background-color: transparent;
            transform: rotateY(-90deg) translateZ(150px);
        }
        .dv3{
            background-color: transparent;
            transform: rotateX(90deg) translateZ(150px);
        }
        .dv4{
            background-color: transparent;
            transform: rotateX(-90deg) translateZ(150px);
        }
        .dv5{
            background-color: transparent;
            transform:translateZ(150px);
        }
        .dv6{
            background-color: transparent;
            transform:translateZ(-150px);
        }
  
        .dv2 li{
            background-color: green;
        }
        .dv3 li{
            background-color: greenyellow;
        }
        .dv4 li{
            background-color: palevioletred;
        }
        .dv5 li{
            background-color: pink;
        }
        .dv6 li{
            background-color: yellow;
        }
        @keyframes rotate{
            0%{
                transform: rotateY(0deg) rotateX(0deg);
            }
            100%{
                transform: rotateY(135deg) rotateX(45deg);
            }
        }
--></style>
<div class="box"><details>
</details>
<div class="dv1">
<ul>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210414978-1908480260.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210455370-951132558.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210515386-1606328461.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210531492-1893984624.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210546106-93795288.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210559659-687635022.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210611844-2140797362.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210627736-1439441421.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210643210-1965363097.jpg
" alt="" class="img1" /></li>
</ul>
</div>
<div class="dv2">
<ul>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210414978-1908480260.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210455370-951132558.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210515386-1606328461.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210531492-1893984624.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210546106-93795288.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210559659-687635022.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210611844-2140797362.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210627736-1439441421.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210643210-1965363097.jpg
" alt="" class="img1" /></li>
</ul>
</div>
<div class="dv3">
<ul>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210414978-1908480260.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210455370-951132558.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210515386-1606328461.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210531492-1893984624.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210546106-93795288.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210559659-687635022.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210611844-2140797362.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210627736-1439441421.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210643210-1965363097.jpg
" alt="" class="img1" /></li>
</ul>
</div>
<div class="dv4">
<ul>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210414978-1908480260.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210455370-951132558.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210515386-1606328461.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210531492-1893984624.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210546106-93795288.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210559659-687635022.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210611844-2140797362.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210627736-1439441421.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210643210-1965363097.jpg
" alt="" class="img1" /></li>
</ul>
</div>
<div class="dv5">
<ul>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210414978-1908480260.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210455370-951132558.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210515386-1606328461.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210531492-1893984624.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210546106-93795288.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210559659-687635022.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210611844-2140797362.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210627736-1439441421.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210643210-1965363097.jpg
" alt="" class="img1" /></li>
</ul>
</div>
<div class="dv6">
<ul>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210414978-1908480260.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210455370-951132558.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210515386-1606328461.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210531492-1893984624.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210546106-93795288.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210559659-687635022.jpg
" alt="" class="img1" /></li>
<li><img src="https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210611844-2140797362.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210627736-1439441421.jpg
" alt="" class="img1" /></li>
<li><img src="!https://img2022.cnblogs.com/blog/1756607/202211/1756607-20221120210643210-1965363097.jpg
" alt="" class="img1" /></li>
</ul>
</div>
</div>

 

posted @ 2022-11-20 21:17  燕嘟  阅读(27)  评论(0)    收藏  举报