zoukankan      html  css  js  c++  java
  • CSS

    效果图如下:

    话不多说,上代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>炫彩流光圆环</title>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body{
                 100vw;
                height: 100vh;
                background-color: #505050;
                display: grid;
                place-items:center;
            }
            .box{
                 400px;
                height: 400px;
                background: url(./pig.jpg);
                border-radius: 50%;
                display: grid;
                place-items:center;
                position: relative;
                color:#fff;
            }
            .box::before{
                content: "";
                 400px;
                height: 400px;
                background:linear-gradient(0deg,#3498db,#8e44ad,#2ecc71,#e74c3c);
                border-radius: 50%;
                position: absolute;
                filter:blur(10px);
                animation: rotate 10s linear infinite 0s;
            }
            .box>div{
                 300px;
                height: 300px;
                background-color: #505050;
                border-radius: 50%;
                z-index: 2;
                display: grid;
                place-items: center;
            }
            @keyframes rotate {
                to{
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div></div>
        </div>
    </body>
    </html>
  • 相关阅读:
    ZOJ 3349 Special Subsequence
    ZOJ 3684 Destroy
    ZOJ 3820 Building Fire Stations
    HDU 5291 Candy Distribution
    HDU 3639 Hawk-and-Chicken
    HDU 4780 Candy Factory
    HDU 4276 The Ghost Blows Light
    ZOJ 3556 How Many Sets I
    技术人员的眼界问题
    神经网络和深度学习
  • 原文地址:https://www.cnblogs.com/500m/p/13542820.html
Copyright © 2011-2022 走看看