CSS进阶---字体图标、平面转换、渐变

最新推荐文章于 2023-07-12 18:11:29 发布

虾小眠0526

最新推荐文章于 2023-07-12 18:11:29 发布

阅读量219

点赞数

分类专栏：前端学习之旅文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_58470558/article/details/129547949

版权

前端学习之旅专栏收录该内容

60 篇文章 2 订阅

订阅专栏

1. 字体图标----Iconfont

字体图标展示的是图标，本质是字体。处理简单的、颜色单一的图片
字体图标的优点
灵活性:灵活地修改样式，例如:尺寸、颜色等
轻量级:体积小、渲染快、降低服务器请求次数
兼容性:几乎兼容所有主流浏览器
使用方便：下载字体包；使用字体图标
使用字体图标- 类名:
1）引入字体图标样式表

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

2）调用图标对应的类名，必须调用2个类名
iconfont类:基本样式，包含字体的使用等
icon-xxx: 图标对应的类名

思考:如果图标库没有项目所需的图标怎么办?
答: IconFont网站上传矢量图生成字体图标
1,与设计师沟通，得到SVG矢量图
2.IconFont网站上传图标，下载使用

<!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;
        }
        .icon-gouwuche-mian{
            color: orange;
        }

    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="a">
                    <span class="iconfont icon-gouwuche-mian"></span>
                    <span>购物车</span>
                    <span class="iconfont icon-xuanze"></span>
                </a>
            </li>
        </ul>

    </div>
</body>
</html>

2. 平面转换

目标:使用transform属性实现元素的位移、旋转、缩放等效果
平面转换：改变盒子在平面内的形态（位移、旋转、缩放)，是2D转换
平面转换属性：transform

2.1 位移

目标：使用transform实现元素位移效果
语法： transform:translate(水平移动距离垂直移动距离);
取值(正负均可)：像素单位数值 / 百分比(参照物为盒子自身尺寸)
注意: X轴正向为右，Y轴正向为下
技巧：translate()如果只给出一个值,表示x轴方向移动距离
单独设置某个方向的移动距离: translateX()&translateY()

绝对定位居中

目标：使用translate快速实现绝对定位的元素居中效果
实现方法：

position: absolute;
left: 50%;
top: 50%;
/* margin */
margin-left: -100px;
margin-top: -50px;
width: 200px;
height: 100px;

例子：

<!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>

2.2 旋转

语法：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/rotate.png" alt="">
</body>
</html>

转换原点

目标：使用transform-origin属性改变转换原点
语法：默认圆点是盒子中心点
transform-origin：原点水平位置原点垂直位置；
取值：
方位名词 (left、top、right、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;
            /* 添加给标签本身，不要加到hover */
            transform-origin: right bottom;
            transform-origin: left bottom;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>
</html>

多重转换

目标：使用transform复合属性实现多形态转换
多重转换技巧：

transform：translate（）rotate（）;

例子：

<!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: 800px;
            height: 200px;
            border: 1px solid #000;
        }
        
        img {
            width: 200px;
            transition: all 8s;
        }
        
        .box:hover img {
            /* 边走边转 */
            transform: translate(600px) rotate(360deg);

            /* 旋转可以改变坐标轴向,先旋转改变了坐标轴向，位移方向会受影响 */
            /* transform: rotate(360deg) translate(600px); */
            
            /* 层叠性 */
            /* transform: translate(600px);
            transform: rotate(360deg); */
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/tyre1.png" alt="">
    </div>
</body>

</html>

2.3 缩放

目标：使用scale改变元素的尺寸
语法：
transform:scale(x轴缩放倍数y轴编放倍数);
技巧：一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放 transform: scale(缩放倍数);
scale值大于1表示放大,scale值小于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: 210px;
            margin: 100px auto;
            background-color: pink;
            
        }

        .box img {
            width: 100%;
            transition: all 0.5s;
        }
        
        .box:hover img {
            /* width: 150%; */

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

<body>
    <div class="box">
        <img src="./images/product.jpeg" alt="">
    </div>
</body>

</html>

3. 渐变背景

目标:使用background-image属性实现渐变背景效果
渐变是多个颜色逐渐变化的视觉效果；一般用于设置盒子的背景

background-image: linear-gradient(
颜色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>渐变背景</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            /* background-image: linear-gradient(
                pink,
                green,
                hotpink
            ); */
            /* 常用---半透明渐变 ：透明：transparent-rgba（）*/
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0, .6)
            );
        }
    </style>
</head>

<body>

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


</body>

</html>

虾小眠0526

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS进阶---字体图标、平面转换、渐变

技巧：一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放。/* 常用---半透明渐变：透明：transparent-rgba（）*//* 旋转可以改变坐标轴向,先旋转改变了坐标轴向，位移方向会受影响 */平面转换：改变盒子在平面内的形态（位移、旋转、缩放)，是2D转换。取值(正负均可)：像素单位数值 / 百分比(参照物为盒子自身尺寸)字体图标展示的是图标，本质是字体。目标：使用transform-origin属性改变转换原点。/* 位移：百分比参考盒子自身尺寸计算结果 */
复制链接

扫一扫