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

心平气荷.

已于 2022-10-13 20:00:48 修改

阅读量173

点赞数 2

分类专栏： css案例练习文章标签：前端 css

于 2022-10-13 16:15:26 首次发布

本文链接：https://blog.csdn.net/qq_53306713/article/details/127303072

版权

css案例练习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、效果：

仿小米logo

二、布局思路

在这里插入图片描述

三、代码：

代码如下（示例）：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       .header-logo{
        position: relative;
        margin: 40px 0 0 40px;
       }
       .logo {
       display: block;
       /* overflow:hidden  超出盒子范围的不显示 */
       overflow:hidden;
       width: 55px;
       height: 55px;
       background-color:#ff6700;
       text-align: left;
       text-indent: -9999em;
       }
       /* mi-logo 和 mi-logo 的公共样式 */
       .logo::before,.logo::after{
        /* 定位 */
        position: absolute;
          /* 伪元素必须要设置content属性 */
        content: '';
        /* 左偏移 */
        left: 0;
        /* 上偏移 */
        top: 0;
        width: 55px;
        height: 55px;
        /* 设置过渡 transiton: 过渡属性 过渡所需要时间  */
        transition: all 0.3s;
       }

       .logo::before {
        /* mi logo 背景图片*/
        background: url(./images/mi-logo.png) no-repeat center center;
          /* 透明度 */
        opacity: 1;
       }
       .logo::after{
        background: url(./images/mi-home.png) no-repeat center center;
        opacity: 0;
        /* 用外边距把它挤到盒子外边 */
        margin-left: -55px;
       }
       /* 鼠标移入 让 mi-logo 往右侧进行滑动 */
       .logo:hover::before {
        opacity: 0;
        margin-left: 55px;
       
       }
        /* 鼠标移入 让 mi-home 回到盒子中间 */ 
       .logo:hover::after {
        margin-left: 0;
        opacity: 1;
       }
    </style>
</head>

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

</html>