CSS(7) 字体图标+定位+平面转换+渐变

最新推荐文章于 2024-02-20 00:02:27 发布

小白一枚2号

最新推荐文章于 2024-02-20 00:02:27 发布

阅读量853

点赞数 21

文章标签： css 平面前端

本文链接：https://blog.csdn.net/2303_79590957/article/details/136094308

版权

字体图标：

定义：展示的是图标，本质是字体。

作用：再网页中添加简单的，颜色单一的小图标。

优点：

灵活性：灵活地修改样式，例如：尺寸，颜色等
轻量级：体积小，渲染快，降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便：先下载，再使用

使用方法：

浏览器搜索“字体图标”，找到 iconfont-阿里巴巴矢量图标库
进入图标库，素材库，找到官方图标库（免费）
找到需要的图标，建议先一并添加入库（购物车图标），再统一下载。
没有项目可以新建一个，在项目中下载到本地，然后解压
然后添加到VScode中。
在需要用字体图标的html中用link标签引入iconfont.css地址
在需要用的地方新添加一个span标签，类名起“iconfont 字体图标类名”
设置好其相关属性后就可以用了

定位：

定位分有：

相对定位 relative
绝对定位 absolute
固定定位 flexed
粘性定位 sticky
静态定位 static（默认）

相对定位(position: relative;)：

不脱（离）标（准流），即占位置，可相对原位置移动。

例如：top: 10p;表示图的顶部（以图为例）在原图的顶部下方10px处

绝对定位(position: absolute;)：

1.脱标，不占位

2.参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器的可视区改位置

3.绝对定位的显示模式特点改变：宽高生效（具备了行内块的特点）

使用场景：子级绝对定位，父级相对定位（子绝父相）或定位居中

定位居中：

1.绝对定位

2.水平，垂直边偏移为50%

3.子级向左上移动自身尺寸的一半（左，上的外边距为“-尺寸的一半”//transform:translate(-50%,-50%)

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: skyblue;
        }
        img {
            position: absolute;
            left: 50%;
            top: 50%;
            /* transform: translate(水平,垂直); */
            transform: translate(-50%,-50%);
            /* margin-left: -250px;
            margin-top: -148.59px; */
            width: 500px;
        }
    </style>
</head>
<body>
    <!-- 
        1.绝对定位
        2.水平，垂直边偏移为50%
        3.子级向左上移动自身尺寸的一半（左，上的外边距为“-尺寸的一半”//transform:translate(-50%,-50%)
     -->
     <img src="../原神启动.png" alt="">
</body>
</html>

效果：

固定定位(position: flexed;)：

1.脱标，不占位

2.参照物是浏览器窗口

3.显示模式特点具备行内块的特点

position:fixed;当元素的位置在网页上滚动时不会改变

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 
        1.脱标，不占位
        2.参照物是浏览器窗口
        3.显示模式特点具备行内块的特点
        */
        div {
            position: fixed;
            top: 0;
            /* left: 0; */
            right: 0;
            width: 500px;
        }
        
    </style>
</head>
<body>
    <h3>固定定位</h3>
    <!-- position:fixed;当元素的位置在网页上滚动时不会改变 -->
    <p>固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==</p>
    <p>固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==</p>
    <p>固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==</p>
    <div><img src="../早柚.gif" alt=""></div>
    <p>固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==</p>
    <p>固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==</p>
    <p>固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==</p>
    <p>固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==</p>
    <p>固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==</p>
    <p>固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==固定定位样例==</p>
</body>
</html>

效果：

粘性定位(position: sticky;)：

粘性定位：相当于是相对定位和固定定位的结合体，默认是相对定位，只要left,right,bottom,top任意一个属性达到满足条件，就自动转换成固定定位

注意事项：

1、sticky元素必须要做父元素中

2、父元素的高度大于设置粘性定位元素的高度

3、父元素不能设置overflow

4、必须设置一个top,right,left,bottom(不设置则一直处于相对定位)

具体理解请看：菜鸟教程在线编辑器 (runoob.com)

平面转换（transform）：

作用：为元素添加动态效果，一般与过渡(transition)配合使用

概念：改变盒子在平面内的形态（位移，旋转，缩放，倾斜）又称为2D转换

位移（translate）:

translate()只写一个值时，表示x轴

translateX()和translateY()单独设置X与Y

取值：像素，百分比（参照盒子自身尺寸计算结果），正负均可

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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(200px,100px);

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

            /* transform: translateX(100px); */
            /* transform: translateY(200px); */
        }

    </style>
</head>
<body>
    <p>属性：transform: translate(x正左,y正下)</p>
    <p>取值：像素，百分比（参照盒子自身尺寸计算结果），正负均可</p>

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

</body>
</html>

旋转：

旋转：rotate:

单位：deg

取正，顺时针旋转

取负，逆时针旋转

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            transition: all 2s;
        }
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="../早柚.gif" alt="">
</body>
</html>

改变旋转中心：

transform-origin:水平原点位置垂直原点位置;

默认下：转换中心是盒子中心点

取值：

方位名词：left top right bottom center

像素单位值

百分比

多重转换：

先平移在旋转

transform: translate() rotate();

旋转会改变坐标轴。多重转换以第一重转换形态的坐标为准。不能拆开写，属性会被重叠。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .f {
            width: 1000px;
            height: 200px;
            border: 1px solid #000;
        }
        .f img {
            width: 200px;
            transition: all 2s;
        }
        .f:hover img {
            transform: translate(800px) rotate(360deg);

            /* 旋转会改变坐标轴向 */
            /* 多重转换以第一重转换形态的坐标为准 */
            /* 不能拆开写，属性会被重叠 */
            /* transform: rotate(360deg) translate(800px); */
        }
    </style>
</head>
<body>
    <div class="f"><img src="../右箭头.png" alt=""></div>
</body>
</html>

缩放：

缩放：scale：

transform: scale(X,Y);

通常，scale只有一个值，表示x与y等比例缩放

大于1放大，小于1缩小(大于0)，小于0倒像

倾斜：

倾斜：skew：

transform: skew();

角度度数deg

正逆时针，负顺时针

渐变：

分为：

线性渐变：上到下，左到右

径向渐变：中心到四周

线性渐变：

blackground-imge: linear-gradient(

渐变方向，

颜色1 终点位置，

颜色2 终点位置，

·············

);

透明颜色：transparent变化的结果，一般用于设置盒子背景

渐变方向（可选）：

to 方位名词(默认to bottom)

角度度数

终点位置（可选）：

百分比(默认等分)

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: green;
            /* 方向： */
            background-image: linear-gradient(
                to right,
                red,
                green
            );
            background-image: linear-gradient(
                45deg,
                red,
                green
            );

            /* 终点： */
            background-image: linear-gradient(
                red 80%,
                green
            );
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果：

径向渐变：

blackground-imge: radial-gradient(

半径 at 圆心水平位置圆心垂直位置，

颜色1 终点位置，

颜色2 终点位置，

·············

);

半径两条时为椭圆

圆心位置取值：像素单位数值，百分比，方位名词

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
            background-image: radial-gradient(
                50px at center center,
                red,
                pink
            );
            background-image: radial-gradient(
                50px 20px at center center,
                red,
                pink
            );
        }

        button {
            width: 100px;
            height: 40px;
            background-color: green;
            border: 0;
            border-radius: 5px;
            color: #fff;
            background-image: radial-gradient(
                30px at 30px 20px,
                rgba(255,255,255,0.2),
                transparent
            );
        }
    </style>
</head>
<body>
    <div></div>
    <button>按钮</button>
</body>
</html>

效果：

小白一枚2号

关注

21
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
CSS(7) 字体图标+定位+平面转换+渐变

粘性定位：相当于是相对定位和固定定位的结合体，默认是相对定位，只要left,right,bottom,top任意一个属性达到满足条件，就自动转换成固定定位。3.子级向左上移动自身尺寸的一半（左，上的外边距为“-尺寸的一半”//transform:translate(-50%,-50%)概念：改变盒子在平面内的形态（位移，旋转，缩放，倾斜）又称为2D转换。使用场景：子级绝对定位，父级相对定位（子绝父相）或定位居中。2、父元素的高度大于设置粘性定位元素的高度。不脱（离）标（准流），即占位置，可相对原位置移动。
复制链接

扫一扫