案例：仿小米logo渐变效果练习

最新推荐文章于 2024-10-09 22:07:13 发布

小超努力中

最新推荐文章于 2024-10-09 22:07:13 发布

阅读量96

点赞数 1

分类专栏：前端文章标签： css html css3 Powered by 金山文档

本文链接：https://blog.csdn.net/ssigin/article/details/129333566

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

😃前端的一个小练习，运用到了伪元素+过渡+绝对定位+相对定位+元素隐藏

结尾有素材，各位感兴趣可以练一下

思路：

设置一个标签和图片大小一样

添加两个伪元素，让before覆盖在标签上，让left在标签的左边

给两个伪元素添加hover标签，当标签被触动时，两个元素同时往右移动，加上transition属性即可实现效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米logo仿写-过渡和伪元素练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .logo {
            position: relative;
            margin: 100px auto;
            width: 260px;
            height: 260px;
            background-color: #ff6f00;
            overflow: hidden;
        }
        .logo::before {
            position: absolute;
            content: '';
            width: 260px;
            height: 260px;
            background: url(images/mi-jia.jpg) no-repeat center;
            transition: all 1.2s;
        }
        .logo::after {
            position: absolute;
            content: '';
            left: -260px;
            width: 260px;
            height: 260px;
            background: url(images/mi-logo.jpg) no-repeat center;
            transition: all 1.2s;
        }

        .logo:hover::after {
            top: 0;
            left: 0;
        }

        .logo:hover::before {
            top: 0;
            left: 260px;
        }   
    </style>
</head>
<body>
    <div class="logo"></div>
</body>
</html>