移动web：字体图标、2d转换

毅王王杂货铺

已于 2022-10-07 20:22:13 修改

阅读量163

点赞数 5

文章标签：学习 html5 css3

于 2022-10-05 21:23:17 首次发布

本文链接：https://blog.csdn.net/wy18207132013/article/details/127166727

版权

1.字体图标

1.1介绍

字体图标一般是单一颜色的图标，本质上是字体。

1.1.1优点

灵活性：灵活地修改样式，例如：尺寸、颜色等

轻量性：体积小、渲染快、降低服务器请求次

兼容性：几乎兼容所有主流浏览器

1.1.2图标库

Iconfont：https://www.iconfont.cn/ 阿里巴巴字体库 (常用)

1.2引入方法

从字体库引入图标样式表

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

1.2.1类名引入

调用字体图标需要两个类名：固定类名iconfont（必须调用），图标对应类名

<i class="iconfont icon-gouwuchekong"></i>
<span>购物车</span>
<i class="iconfont icon-arrow-down"></i>

1.2.2unicode引入

从字体库找到unicode编码

<i class="iconfont cry">&#xe66a;</i>
<i class="iconfont computer">&#xe66e;</i>

1.2.3伪元素引入

通过查看iconfont.css文件

<style>
        i::before {
            content: '\e600';
            font-size: 500px;
        }
</style>

1.2.4在线连接引入

<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3685923_4goxxfrtnxv.css">
<i class="iconfont icon-fangdajing"></i>

2.平面转换

2.1位移

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

特点：2d移动中移动100%指的是移动自身大小的100%；

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>
        .box {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transform: translate(100px,100px);
            /* transform: translateX(100%); */
            /* transform: translateX(100px) translateY(100px); */
        }
        /* 2d移动中移动100%指的是移动自身大小的100% */
        /* 2d移动不会影响别的元素 */
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.1.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>Document</title>
    <style>
        .box {
            position: relative;
            width: 800px;
            height: 600px;
            border: 1px solid #000;
        }
        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 400px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
</html>

2.1.2完全脱标后居中

子绝父相，四个方位都为0后完全脱标，在用margin：auto（自适应）居中

<!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 {
            position: relative;
            width: 800px;
            height: 600px;
            border: 1px solid #000;
        }
        .son {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>
</html>

2.2旋转

transform：rotate（）单位deg度；turn圈。

2.2.1旋转点

旋转点默认位置是自身中心的位置。

更改旋转点方法

可以通过transform-origin：方位名词方位名词；（left right top bottom center）

.box {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 200px auto 0;
            text-align: center;
            line-height: 725px;
            transition: all 100000000s;
        }
        .box img {
            transition: all 100000000s;
            transform-origin: left top;
            /* 1.旋转点默认位置是中心 */
            /* 2.方位名词transform-origin：left right top bottom center */
            /* 3.像素px */
            /* 4.百分比 */
        }

2.3缩放

2d转换-缩放：transform: scale(1)；1表示大小不变，小于1表示缩小多少倍，大于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>Document</title>
    <style>
        .box {
            width: 450px;
            height: 300px;
            background: url(./images/11.jpg) no-repeat;
            text-align: center;
            margin: 0 auto;
        }
        img {
            width: 300px;
            transition: all 1s;
            opacity: 0;
        }
        .box:hover img {
            transform: scale(0.2);
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/play.png" alt="">
    </div>
</body>
</html>

2.4综合写法

transform: translateX(900px) scale(1) rotate(50turn);

旋转属性值要写到最后，因为旋转时坐标轴会变，会影响到位移。

2.5倾斜

transform: skew(45deg)倾斜45°

正值是往左倾斜，负值是往右倾斜

<!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>
        div {
            width: 500px;
            height: 500px;
            background-color: skyblue;
            margin: 300px auto;
            transform: skew(45deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2.6渐变色

渐变色不是背景色，是背景图

background-image: linear-gradient(45deg,pink,skyblue,purple)

括号内第一个属性值可以调整渐变色的方向。

<!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>
        .one {
            width: 800px;
            height: 500px;
            background-image: linear-gradient(45deg,pink,skyblue,purple);
        }
        .two {
            width: 800px;
            height: 200px;
            background-image: linear-gradient(transparent,rgba(0,0,0,0.5));
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>