字体图标，平面转换，渐变的说明》

原创已于 2022-04-22 22:49:53 修改 · 680 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-03-25 22:59:46 首次发布

移动web 专栏收录该内容

5 篇文章

订阅专栏

本文介绍CSS3中的平面转换技术，包括位移、旋转、缩放等效果的实现方法，并通过实例进行演示。此外，还介绍了如何使用线性渐变创建渐变背景效果。

字体图标

项目目录
在这里插入图片描述
字体图标基本使用

<!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>字体图标基本使用-类名</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .iconfont {
            font-size: 60px;
        }

        /* i {
            font-size: 60px;
        } */

    </style>
     
</head>
<body>
    <!-- iconfont 是固定，icon-favorites-fill是在iconfont目录下demo_index.html 中的一个类 -->
    <i class="iconfont icon-favorites-fill"></i>

    <!-- 注意：类选择器的优先级大于标签选择器，故改变字体大小使用类选择器 -->
</body>
</html>

购物车

<!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>购物车</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        a {
            color: #333;
            text-decoration: none;
        }
        
        .nav {
            width: 200px;
            margin: 50px auto;
            font-size: 12px;
        }
                
        .orange {
            color: #f40;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span class="iconfont icon-cart-Empty-fill orange"></span>
                    <span>购物车</span>
                    <span class="iconfont icon-arrow-down"></span>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>

矢量图的上传
原因：图标库可能没有项目所需的图标
解决方案：Iconfont网站上上传矢量图生成字体图标

与设计师沟通，得到SVG矢量图
iconfont网站上传图标，下载使用

平面转换

使用transform属性实现元素的位移，旋转，缩放等效果

平面转换
a.改变盒子在平面内的形态（位移，旋转，缩放）
b.2D转换
平面转换属性
transform

位移
语法：
transform.translate(水平移动距离，垂直移动距离)；

取值（正负均可）：

像素单位数值
百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下

技巧：
translate()如果只给出一个值，表示X轴方向移动的距离
单独设置某个方向的移动距离：translateX() & translateY()

在这里插入图片描述

<!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>位移-基本使用</title>
    <style>
        .father {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: all 0.5s;
        }
    
        /* 鼠标移入到父盒子，son改变位置 */
        .father:hover .son {
            /* transform: translate(100px, 50px); */

            /* 百分比: 盒子自身尺寸的百分比 */
            /* transform: translate(100%, 50%); */

            /* transform: translate(-100%, 50%); */

            /* 只给出一个值表示x轴移动距离 */
            /* transform: translate(100px); */

            transform: translateY(100px);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

效果图如下：
在这里插入图片描述
位移-绝对定位居中

<!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>绝对定位元素居中效果</title>
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -100px;
            margin-top: -50px; */

            transform: translate(-50%, -50%);

            width: 203px;
            height: 100px;
            background-color: pink;          
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

效果图：
在这里插入图片描述
示例：双开门
项目目录

代码

<!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;
            margin: 0 auto;
            background: url('./images/bg1.jpg');
            overflow: hidden;
        }
        
        .box::before,
        .box::after {
            float: left;
            content: '';
            width: 50%;
            height: 600px;
            background-image: url(./images/fm1.jpg);
            transition: all .5s;
        }

        .box::after {
            background-position: right 0;
            /* 右边的图片 只显示整张图片50%靠右 */
        }

        /* 鼠标移入的时候的位置改变的效果 */
        .box:hover::before {
            transform: translate(-100%);
        }

        .box:hover::after {
            transform: translateX(100%);
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>

效果图如下

鼠标未悬浮
在这里插入图片描述

鼠标悬浮在大盒子时
在这里插入图片描述
旋转
语法
transform:rotate(角度)；
注意：角度单位是deg；取值正负均可（取值为正时，顺时针转动；取值为负，逆时针转动）

示例：小风车

<!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>旋转效果</title>
    <style>
        img {
            width: 250px;

            transition: all 2s;
            /* 保证动画的过渡 */
        }
        
        img:hover {
            /* 顺 */
            transform: rotate(360deg);

            /* 逆 */
            /* transform: rotate(-360deg); */
        }

        
    </style>
</head>
<body>
    <img src="./images/rotate1.png" alt="" title="小风车，呜呼！！！！">
</body>
</html>

效果图：
旋转前
在这里插入图片描述
旋转后

旋转—转换原点
语法：

默认圆点是盒子中心点
transform-origin:原点水平位置原点垂直位置

取值：

方位名词（left,top,rigth,bottom,center）
像素单位数值
百分比（参照盒子自身尺寸计算）

示例—小风车

<!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>转换原点</title>
    <style>
        img {
            width: 250px;
            border: 1px solid #000;
            transition: all 2s;
            transform-origin: right bottom;
            /* transform-origin: left bottom; */
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/rotate1.png" alt="">
</body>
</html>

效果图
在这里插入图片描述
缩放
语法：
transform:scale(x轴缩放倍数，y轴缩放倍数);

注意：一般情况下，只有scale设置一个值，表示x轴和y轴等比例缩放
transform:scale(缩放倍数);

<!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>缩放效果</title>
    <style>
        .box {
            width: 300px;
            height: 210px;
            margin: 100px auto;
            background-color: pink;
            
        }

        .box img {
            width: 100%;
            transition: all 0.5s;
        }
        
        .box:hover img {
           
            /* 注释：当scale()中的值大于1是放大效果
                    当scale()中的值小于1是缩小效果
                    当scale()中的值等于1是保持不变的效果
            */

            transform: scale(1.2);
            /* transform: scale(0.8); */
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/product1.jpg" alt="">
    </div>
</body>

</html>

效果图
在这里插入图片描述
渐变背景

渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景

语法：
background - image linear -gradient(
颜色1，
颜色2
);

示例-渐变背景1

<!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>渐变背景</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            
            background-image: linear-gradient(
                /* transparent是代表透明 */
                transparent,
                /* rgba是代表红绿蓝三原色以及透明度 */
                rgba(0,0,0, .6)
            );
        }
    </style>
</head>

<body>

    <div class="box"></div>


</body>

</html>

效果图
在这里插入图片描述

示例-渐变背景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>产品展示效果</title>
    <style>
        .box {
            position: relative;
        }
        
        .box img {
            width: 300px;
        }
        
        .box .title {
            position: absolute;
            left: 15px;
            bottom: 20px;
            z-index: 2;
            width: 260px;
            color: #fff;
            font-size: 20px;
            font-weight: 700;
        }

        .box .mask {
            position: absolute;
            left: 0;
            top: 0;

           
            opacity: 0;
            width: 300px;
            height: 212px;
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,.6)
            );
            transition: all .5s;
        }

        .box:hover .mask {
            opacity: 1;
            
        }
    </style>
</head>

<body>

    <div class="box">
        <img src="./images/product.jpg" alt="">
        <div class="title">这是一个渐变展示</div>
        <!-- 渐变背景 mask -->
        <div class="mask"></div>
    </div>
</body>

</html>