web移动端知识点复习(一)

原创已于 2022-07-30 11:26:38 修改 · 239 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css3 #html5

于 2022-07-24 20:46:48 首次发布

本文介绍了如何通过三种方式引入字体图标，包括类名、unicode编码和伪元素，并详细讲解了平面转换中的位移、旋转（包括原点设定）和缩放技术，以及渐变背景的创建方法。

文章目录

1. 字体图标
- 1.1 3种引入方式
2. 平面转换
3.渐变

1. 字体图标

1.1 3种引入方式

使用字体图标 – 类名

使用字体图标-类名:link rel=“stylesheet” href=“./iconfont.css”
调用图标对应的类名,必须调用2个类名: class=“iconfont icon-xxx”

使用字体图标 – unicode编码：
使用字体图标 – 伪元素

<link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./fs/iconfont.css">
    <style>
        .icon-xinxianguoshu_xinxianshucaiqiezi {
            color: blueviolet;
         /* 写大小时候,注意权重问题,因为iconfont.css中已经设置字体大小 */
            font-size: 60px;
        }
        /* 找到iconfont.css中的content中的内容 */
        div::after {
            content: '\e668';
        }
        .one::after {
            content: '\e669';
        }
        .two::after {
            color: orange;
            font-size: 60px;
        }
    </style>

 <!-- class生成 -->
    <span class="iconfont icon-gouwuchekong"></span>
    <span class="iconfont icon-browse"></span>
    <span class="iconfont icon-xinxianguoshu_xinxianshucaiqiezi"></span>
    <!-- Unicode生成 -->
    <span class="iconfont">&#xe666;</span>
    <span class="iconfont two">&#xe621;</span>
    <!-- 伪元素生成字体图标 -->
    <div class="iconfont"></div>
    <div class="iconfont one"></div>

2. 平面转换

属性:transform

2.1 位移

transform:translate(水平距离移动,垂直移动距离);

取值正负均可:

像素单位数值
百分比(参照物为自身盒子大小

注意:

x轴正向为右,Y轴正向为下)
translate()如果只给出一个值,表示x轴方向移动距离
单独设置某个方向的移动距离:translateX()&translateY()

.box {
            height: 200px;
            width: 200px;
            background-color: coral;
            transform: translate(100px,100px);
        }

2.1.1 位移-绝对定位居中

        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
            position: relative;
        }
        .father .son {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color:chocolate;
            left: 50%;
            top: 50%;
            /* 注意transform的层叠性问题 */
            transform: translate(-50%,-50%);
        }

2.2 旋转

transform: rotate(角度); 角度单位是deg

技巧：取值正负均可

取值为正, 则顺时针旋转
取值为负, 则逆时针旋转

<style>
        .box {
            margin: 0 auto;
            height: 200px;
            width: 200px;
            border-radius: 50%;
            background-color: aquamarine;
            transition: all 1s;
        }
        .box:hover {
            /* 360deg=1turn */
            transform: rotate(360deg);
        }
        .box img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/p4-tx3.png" alt="">
    </div>
</body>

2.2.1旋转原点

使用transform-origin属性改变转换原点

语法

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

取值 :

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

2.2.2 多重转换

使用transform复合属性实现多形态转换

多重转换原理

旋转会改变网页元素的坐标轴向
先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

注意:先写位移,在写旋转

.box {
            width: 1200px;
            height: 303px;
            border: 2px solid #000;
        }
        .box img {
            transition: all 2s;
        }
        .box img:hover {
            transform: translate(800px,0px) rotate(4turn);
        }

2.3 缩放

使用scale改变元素的尺寸
语法 :transform: scale(x轴缩放倍数, y轴缩放倍数);

技巧

一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小

3.渐变

使用background-image属性实现渐变背景效果

渐变色可以通过角度进行设置,单位是deg
用的最多的渐变色,从透明色变成半透明使用的较多
to属性后面跟上方位名词left right top bottom

.box {
            height: 400px;
            width: 400px;
            background-image: linear-gradient(to right,pink, purple);
        }