移动Web 字体图标 2D平面转换渐变效果

程序员大臣

已于 2023-06-05 14:50:34 修改

阅读量159

点赞数 3

文章标签：前端 css3 html5

于 2022-10-05 14:45:27 首次发布

本文链接：https://blog.csdn.net/moraxz/article/details/127172176

版权

一.字体图标

首先通过阿里巴巴矢量图标库下载需要的字体图标样式(链接放在下方)

https://www.iconfont.cn/

字体图标的链接方式分为三种方式:直接链接、unicode、伪元素使用字体图标.

1.直接链接

<!-- 1.引入iconfont.css文件 -->
<link rel="stylesheet" href="./fonts/iconfont.css">
    <style>
        i {
            font-size: 50px !important;
            color: aqua;
        }
    </style>
</head>
<body>
    <!-- 2.使用类名 -->
    <i class="iconfont icon-gouwuchekong"></i>
</body>
</html>

2.unicode字体图标

<!-- 1.第一步引入字体图标的css -->
<link rel="stylesheet" href="./fonts/iconfont.css">
    <style>
       .green {
        color: green;
        font-size: 50px;
       }
    </style>
</head>
<body>
    <!-- 2.第二步添加固定类名iconfont,使用unicode编码 -->
    <i class="iconfont green">&#xe66a;</i>
</body>
</html>

3.伪元素使用字体图标

<link rel="stylesheet" href="./fonts/iconfont.css">

    <style>
        i::before {
            content: '\e66a';
        }
    </style>
</head>
<body>
    <i class="iconfont"></i>
</body>
</html>

二.2D平面转换

1.下面展示一个简单的2D的开门案例:

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
           width: 1366px;
           height: 600px;
           background: url(./images/bg.jpg) no-repeat;
           margin: 0 auto;
           overflow: hidden;
        }

        .left,
        .right {
            float: left;
            width: 50%;
            height: 600px;
            transition: all 1s;
        }


        .left {
           background: url(./images/fm.jpg) no-repeat;
        }

        .right {
            background: url(./images/fm.jpg) no-repeat right 0px;

        }

        .box:hover .left {
           transform: translateX(-100%);
        }

        .box:hover .right {
           transform: translateX(100%);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

3.渐变效果

下面展示几个比较常用的背景色:

1.透明色到黑色半透明

2.透明色到白色半透明

<!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>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            /* linear-gradient线性渐变(颜色1,颜色2,颜色3) */
            /* background-image:linear-gradient(aqua, green, black); */
            
            /* to(到哪去...)属性,改变渐变颜色的方向 */
            background-image:linear-gradient(to left,aqua, green, black);

            /* 除了to属性 还可以使用角度deg */
            /* background-image:linear-gradient(-45deg, aqua, green, black); */


            /* 几个常用的背景色 */
            /* 透明色到黑色半透明 */
            /* background-image: linear-gradient(transparent,rgba(0,0,0,0.5)); */


            /* 透明色到白色半透明 */
            /* background-image: linear-gradient(transparent,rgba(255,255,255,0.5)); */
        }

        /* 注意点: */
        /* 1.渐变色使用背景的写background-image: */
        /* 2.渐变色是多个颜色组成 */
        /* 3.渐变色的颜色组成,角度后面有ui设计师提供 */
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

如果有需要改进的地方欢迎大家在评论区留言!!!

如果你觉得这篇文章对你有帮助的话希望能够点一个小小的赞,你的赞对我就是最大的鼓励与支持。