使用 mix-blend-mode 实现抖音 LOGO

<template>

<div class="g-container">

    <div class="j"></div>

    <div class="j"></div>

</div>

</template>

<style lang="scss">

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;

    &::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);

    }

   

        &::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-child {

    left: 10px;

    top: 10px;

    background: #fe2d52;

    z-index: 100;

    mix-blend-mode: lighten;

    animation: moveLeft 10s infinite;

   

    &::before {

        border: 47px solid #fe2d52;

        border-top: 47px solid transparent;

    }

    &::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>

 

 

转自： https://csscoco.com/inspiration/#/./blendmode/blend-douyin-logo.md