css 小米200w Logo

代码来源

B站 CodingStartup起码课 用一个div画小米新Logo

在线查看

CodePen：小米 logo 前端渲染

效果

代码

html

<div></div>

css

body{
    
    
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
div{
    
    
    position:  relative;
    width:  440px;
    height: 440px;
    background-color: #ea6102;
    border-radius: 150px;
    animation:  6s rotate ease-in-out infinite;
    perspective: 3000px;
}

@keyframes rotate {
    
    
    0% , 100% {
    
    
        transform: rotate3d(0,1,0,-30deg);
    }
    50% {
    
    
        transform: rotate3d(0,1,0,30deg);
    }
}

div::before{
    
    
    content: "";
    display:block;
    position: absolute;
    width: 190px;
    height: 170px;
    top:132px;
    left: 86px;

    box-sizing: border-box;
    border-color:#fff;
    border-style:solid;
    
    border-left-width: 40px;
    border-right-width: 40px;
    border-top-width: 36px;
    border-radius: 4px;
    border-top-right-radius: 56px;
    border-bottom-width: 0;
}
div::after{
    
    
    content:'';
    display:block;
    position:absolute;
    top: 198px;
    left:160px;
    width:42px;
    height: 42px;
    background-color: #fff;
    border-radius:4px;
    box-shadow: 0px 36px 0px 0px #fff,
                0px 63px 0px 0px #fff,
                150px -66px 0px 0px #fff,
                150px -33px 0px 0px #fff,
                150px 0px 0px 0px #fff,
                150px 36px 0px 0px #fff,
                150px 63px 0px 0px #fff;
                

}