css 小米200w Logo

最新推荐文章于 2023-08-14 22:59:35 发布

HHH 917

最新推荐文章于 2023-08-14 22:59:35 发布

阅读量304

点赞数 1

分类专栏： css 文章标签： css

原文链接：https://www.bilibili.com/video/BV1V64y1S769?t=94

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

代码来源

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;
                

}