阅读 112

CSS3-筛子练习

Video_2021-07-19_174803.gif

这里复杂化了代码,以练习flex布局为主,没有太大的参考价值,自己屯一下

<!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>
        * {
            margin: 0px;
            padding: 0;
            /* background-color: black; */
        }
        body {
            perspective: 2000px;
            perspective-origin:0 0;
            transform-style: preserve-3d;
            height: 100vh;
            background-color: transparent;
        }
        @keyframes round {
            0%{
                transform:translate(-50%,-50%) rotateY(0deg)
            }
            100%{
                transform:translate(-50%,-50%) rotateY(360deg)
            }
        }
        .wrapper {
            width: 400px;
            height: 400px;
            /* border: 1px solid black; */
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            transform-style: preserve-3d;
            animation:round 5s infinite linear;
        }
        

        .content {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            padding: 10%;
            position: absolute;
            background-color: #333;
        }

        .content div {
            width: 20%;
            height: 20%;
            border-radius: 50%;
            /* border: 1px solid #ccc; */
            background-color: #ccc;
        }
        /* .content1,
        .content2,
        .content3,
        .content4{

        } */

        .content1 {
            justify-content: center;
            align-items: center;
            transform:rotateY(0deg) translatez(200px);
        }

        .content2 {
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            transform:rotateY(90deg) translatez(200px);
        }

        .content3 {
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            transform:rotateY(180deg) translatez(200px);
        }

        .content3 div:nth-of-type(1) {
            align-self: flex-start;
        }

        .content3 div:nth-of-type(3) {
            align-self: flex-end;
        }

        .content4 {
            justify-content: space-around;
            align-content: space-around;
            flex-wrap: wrap;
            transform:rotateY(270deg) translatez(200px);
            
        }
        .content4 .temp{
            width:40%;
            height: 40%;
            display: flex;
            border: 0;
            background-color: transparent;
        }
        .content4 .temp div{
            width:50%;
            height: 50%;
            margin: auto;
        }
        .content5 {
            justify-content: space-between;
            align-content: space-between;
            flex-wrap: wrap;
            transform:rotateX(90deg) translatez(200px);
            
        }
        .content5 .temp{
            width:30%;
            height: 30%;
            display: flex;
            border: 0;
            background-color: transparent;
        }
        .content5 .temp div{
            width:60%;
            height: 60%;
            margin: auto;
        }
        .content5 .temp:nth-of-type(3){
            width: 80%;
            margin: auto;
        }
        .content5 .temp:nth-of-type(3) div{
            width: 25%;
        }
        .content6 {
            flex-direction: column;
            justify-content: space-around;
            align-content: space-around;
            flex-wrap: wrap;
            transform:rotateX(270deg) translatez(200px);
            
        }
        .content6 .temp{
            width:30%;
            height: 30%;
            display: flex;
            border: 0;
            background-color: transparent;
        }
        .content6 .temp div{
            width:60%;
            height: 60%;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="content content1">
            <div></div>
        </div>
        <div class="content content2">
            <div></div>
            <div></div>
        </div>
        <div class="content content3">
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="content content4">
            <div class="temp">
                <div></div>
            </div>
            <div class="temp">
                <div></div>
            </div>
            <div class="temp">
                <div></div>
            </div>
            <div class="temp">
                <div></div>
            </div>
        </div>
        <div class="content content5">
            <div class="temp">
                <div></div>
            </div>
            <div class="temp">
                <div></div>
            </div>
            <div class="temp">
                <div></div>
            </div>
            <div class="temp">
                <div></div>
            </div>
            <div class="temp">
                <div></div>
            </div>
        </div>
        <div class="content content6">
            <div class="temp">
                <div></div>
            </div>
            <div class="temp">
                <div></div>
            </div>
            <div class="temp">
                <div></div>
            </div>
            <div class="temp">
                <div></div>
            </div>
            <div class="temp">
                <div></div>
            </div>
            <div class="temp">
                <div></div>
            </div>
        </div>
    </div>
</body>

</html>
复制代码
文章分类
前端
文章标签