CSS抖音标

HTML代码：

<div class="g-container">
    <div class="j"></div>
    <div class="j"></div>
</div>

CSS代码：

<style>
        body {
            background: #000;
            overflow: hidden;
        }
        .g-container {
            position: relative;
            width: 200px;
            margin: 100px auto;
            filter: contrast(150%) brightness(110%);
        }
        .j {
            position: absolute;
            top: 0;
            left: 0;
            width: 47px;
            height: 218px;
            z-index: 1;
            background: #24f6f0;
        }
        .j:before {
             content: "";
             position: absolute;
             width: 100px;
             height: 100px;
             border: 47px solid #24f6f0;
             border-top: 47px solid transparent;
             border-radius: 50%;
             top: 121px;
             left: -147px;
             transform: rotate(45deg);
         }

        .j:after {
             content: "";
             position: absolute;
             width: 140px;
             height: 140px;
             border: 40px solid #24f6f0;
             border-right: 40px solid transparent;
             border-top: 40px solid transparent;
             border-left: 40px solid transparent;
             top: -110px;
             right: -183px;
             border-radius: 100%;
             transform: rotate(45deg);
             z-index: -10;
         }

        .j:last-of-type {
            left: 10px;
            top: 10px;
            background: #fe2d52;
            z-index: 100;
            mix-blend-mode: lighten;
            animation: moveLeft 10s infinite;
        }
        .j:last-of-type:before {
             border: 47px solid #fe2d52;
             border-top: 47px solid transparent;
         }
        .j:last-of-type:after {
             border: 40px solid #fe2d52;
             border-right: 40px solid transparent;
             border-top: 40px solid transparent;
             border-left: 40px solid transparent;
         }


        @keyframes moveLeft {
            0% {
                transform: translate(200px);
            }
            50% {
                transform: translate(0px);
            }
            100% {
                transform: translate(0px);
            }
        }
    </style>

来源：CSDN

作者：W Y L

链接：https://blog.csdn.net/weixin_45959525/article/details/104271620