4

挑战一个盒子实现小米logo

 2 years ago
source link: https://blog.csdn.net/m0_53321320/article/details/123068883
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

挑战一个盒子实现小米logo

森森子_ 于 2022-02-22 15:31:34 发布 342
专栏收录该内容
8 篇文章 0 订阅

大家好呀！学习完spring感觉神清气爽，今天突发奇想试试使用一个盒子来实现小米的logo，主要学习伪元素的使用，以及阴影的妙用，话不多说，看下最终实现效果🚀

在这里插入图片描述

1，首先是 html 部分，只是用一个div

<div></div>

2，css样式
首先是基础样式，全局取消内外边距以及使用的盒子模型
给body设置flex布局 display: flex; align-items: center; justify-content: center; min-height: 100vh;，使得内容水平垂直居中，这个动画就是旋转，可有可无
然后就是对div盒子写一下基本样式了，宽高背景颜色，因为子绝父相，所以添加了相对定位 position: relative;,border-radius: 110px;处理圆角，🆗，look look

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    animation:  d3 15s infinite;
    perspective: 2000px;
}
div{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: #ff6a00;
    border-radius: 110px;
}

在这里插入图片描述

关于这个一个盒子实现logo，就是通过这一个盒子的伪元素来实现，所以主要学习内容就是伪元素的使用，以及阴影的妙用，好，🆗
注意：
html都可以使用伪元素，使用伪元素时必须有content: "";，没有内容就写空，这句必不可少，否则不生效
阴影box-shadow: offset-x offset-y blur spread color position; 当不给blur spread 这两个参数时，就像一个有宽高有背景颜色的盒子一样，利用这点对它进行叠加微调，就能实现啦！🚀

div::before{
    content: "";
    display: block;
    position: absolute;
    width: 88px;
    height: 110px;
    top: 84px;
    left: 45px;
    border:solid #fff;
    border-left-width: 30px;
    border-right-width: 30px;
    border-top-width: 26px;
    border-radius: 3px;
    border-top-right-radius: 42px;
    border-bottom-width: 0;
}
div::after{
    content: "";
    display: block;
    position: absolute;
    width: 30px;
    height: 35px;
    top: 125px;
    left: 105px;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 30px #fff,
    0 56px #fff,
    120px -30px #fff,
    120px -43px #fff,
    120px 0 #fff,
    120px 30px #fff,
    120px 56px #fff;
}
@keyframes d3{
    0%,100%{
        transform: rotate3d(0,1,0,0deg);
    }
    50%{
        transform: rotate3d(0,1,0,360deg);
    }
}
newCodeMoreWhite.png

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>小米 logo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            animation: d3 15s infinite;
            perspective: 2000px;
        }

        div {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: #ff6a00;
            border-radius: 110px;
        }

        div::before {
            content: "";
            display: block;
            position: absolute;
            width: 88px;
            height: 110px;
            top: 84px;
            left: 45px;
            border: solid #fff;
            border-left-width: 30px;
            border-right-width: 30px;
            border-top-width: 26px;
            border-radius: 3px;
            border-top-right-radius: 42px;
            border-bottom-width: 0;
        }

        div::after {
            content: "";
            display: block;
            position: absolute;
            width: 30px;
            height: 35px;
            top: 125px;
            left: 105px;
            background-color: #fff;
            border-radius: 3px;
            box-shadow: 0 30px #fff,
                0 56px #fff,
                120px -30px #fff,
                120px -43px #fff,
                120px 0 #fff,
                120px 30px #fff,
                120px 56px #fff;
        }

        @keyframes d3 {

            0%,
            100% {
                transform: rotate3d(0, 1, 0, 0deg);
            }

            50% {
                transform: rotate3d(0, 1, 0, 360deg);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
newCodeMoreWhite.png

到这就结束了，感谢您的观看！！！❤️

在这里插入图片描述


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK