小白初上手HTML+CSS 仿写小米官网logo动画

最新推荐文章于 2024-06-07 11:58:46 发布

Buliang_C

最新推荐文章于 2024-06-07 11:58:46 发布

阅读量2.3k

点赞数 11

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

本文链接：https://blog.csdn.net/o__o__o__o/article/details/109069996

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

前言（小白初体验之html和css）
一、实际运行效果
二、实际操作
三、总结

前言（小白初体验之html和css）

初入前端，跟着B站的Pink老师学习了一段时间。在Pink老师讲到过渡效果那一课的时候，留下了一个小米Logo效果的课堂小案例。课后自己也动手做了个类似的效果，分享在这里与各位大佬和像我这样的萌新共同交流，共同进步。
这也是我的第一篇博客，记录我的前端学习之路。平时我会把自己在学习中获得的一些经验，方法以及遇到的一些坑之类的，总结下来放到博客中，与大家一起交流。

废话不多说，直接进入正文

一、实际运行效果

小米Logo效果

图片比文字带劲，先上图，看效果。感觉有点德芙的味道，纵享丝滑

二、实际操作

1.素材准备

先去小米官网把两张logo素材爬下来。

2.理论基础

首先准备一个大div盒子，参照小米的写法，利用伪元素选择器，伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化了HTML结构。

理论模型如下图所示
before和after两个伪元素并排放置在div盒子中。其中after伪元素利用margin-left，将盒子的左外边距缩小至紧贴第一个伪元素盒子，从而使两个盒子并排放置。实际的伪元素为行内元素，需要通过display: block;转化后，使其盒子大小与div盒子保持一致，div盒子大小即为logo大小。在这里为了方便解释，所以模型图中的伪元素盒子画的较小。

选择符	简介
::before	在父元素内容的前面创建元素
::after	在父元素内容的后面创建元素

当我们的鼠标经过div中的logo时，利用hover伪类选择器，将before伪元素的左侧外边距撑大，同时将after伪元素的左侧外边距缩小。同时结合过渡效果，实现顺滑移动效果。

在这里插入图片描述

3.掉坑经历分享

在测试代码的时候，遇到一个当时一时没能解决的问题。发现logo向左向右移动的时候会有bug。向左移动时，要经过一段距离才能取消移动效果，向右移动的时候极其不稳定，效果如下所示。经过一通分析，发现before伪元素在扩大左侧外边距时，被挤到了div的右侧，但盒子仍然存在，所以鼠标依旧是hover的状态，故要移动一段距离。向右移动出现的bug原理类似。

在这里插入图片描述

4.解决bug

再一通分析后发现，只要将超出div盒子的内容全部隐藏，就能很好的解决这个问题。下面这行代码就能很好地解决超出盒子边界的问题。

overflow: hidden;

同时这条代码也有很多妙用，以后单独再出一期，分享overflow:hidden在实际小案例中的巧妙运用。

5.完整代码

代码如下：

    <!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smooth</title>
    <style>
        .box {
            width: 55px;
            height: 55px;
            margin: 100px auto;
            overflow: hidden;
        }

        .box .logo {
            display: block;
            position: relative;
            width: 100%;
            height: 100%;
            background-color: rgb(255, 103, 0);
        }

        .box .logo::before,
        .box .logo::after {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            content: "";
            transition: all .2s;
        }

        .box .logo::before {
            background: url(mi-logo.png) no-repeat 50% 50%;

        }

        .box .logo::after {
            background: url(mi-home.png) no-repeat 50% 50%;
            margin-left: -55px;
        }

        .box .logo:hover::before {
            margin-left: 55px;
        }

        .box .logo:hover::after {
            margin-left: 0px;
        }
    </style>
</head>

<body>
    <div class="box">
        <a class="logo" title="小米官网">
            <!-- 小米官网 -->
        </a>
    </div>
</body>

</html>