挑战一个盒子实现小米logo

最新推荐文章于 2024-10-02 01:29:58 发布

m0_67402731

最新推荐文章于 2024-10-02 01:29:58 发布

阅读量192

点赞数

分类专栏：前端 html 文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_67402731/article/details/123396684

版权

前端同时被 2 个专栏收录

32 篇文章 5 订阅

订阅专栏

html

32 篇文章 0 订阅

订阅专栏

本文介绍了如何使用一个简单的HTML div元素，结合CSS伪元素和阴影效果，来实现小米Logo的视觉呈现。通过设置div的基本样式、伪元素的内容、位置和边框属性，以及巧妙运用阴影，成功地创建了Logo的主要组成部分。此外，文章还提到了body的布局调整，以及一个简单的旋转动画，使展示更加生动。

摘要由CSDN通过智能技术生成

大家好呀！学习完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);
    }
}

完整代码

<!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>

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

在这里插入图片描述