移动Web学习01-字体图标&平面转换

都是数据而已

已于 2024-03-24 21:34:03 修改

阅读量957

点赞数 10

文章标签：前端学习平面

于 2024-03-24 21:23:21 首次发布

本文链接：https://blog.csdn.net/qq_45052183/article/details/136995246

版权

1、字体图标

1.1、什么是字体图标

我们可以使用字体图标来实现网页中简洁的图标效果

在这里插入图片描述

字体图标展示的是图标，本质是字体。处理简单的、颜色单一的图片

1.2、字体图标的优点

灵活性、轻量级、兼容性、使用方便

可以灵活的修改样式、例如尺寸、颜色等、体积很小、渲染更快、可以降低服务器请求次数、几乎兼容所有的主流浏览器、使用也非常的

方便，下载–>使用

所谓的浏览器兼容性问题、当世已经不在考虑了、IE6,7,8,微软也不在更新自己的浏览器了,所谓的兼容性问题已经不存在了

1.3、开源的图标网站

阿里巴巴：https://www.iconfont.cn、字节跳动：https://iconpark.oceanengine.com

在这里插入图片描述

1.4、使用方式一：Unicode 方式

<!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>
        /* 1、引入字体图标 */
        @font-face {
            font-family: 'iconfont';
            src: url('./fonts/iconfont.woff2?t=1711259171529') format('woff2'),
                url('./fonts/iconfont.woff?t=1711259171529') format('woff'),
                url('./fonts/iconfont.ttf?t=1711259171529') format('truetype');
        }
        /* 2、调用字体 */
        i {
           font-family: 'iconfont';
           font-style: normal;
           font-size: 100px;
           color: blue;
        }
    </style>
</head>
<body>
     <i>&#xe603;</i>
</body>
</html>

1.5、使用方式二：Class方式

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、引入iconfont.css文件 -->
    <link rel="stylesheet" href="./css/iconfont.css">
    
</head>
<body>
     <span class="iconfont icon-luosifen-" ></span>
</body>
</html>

1.6、使用伪类元素设置字体图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 1、引入iconfont.css文件 -->
     <link rel="stylesheet" href="./css/iconfont.css">
     <!-- 2、使用伪类元素设置图标信息 -->
     <style>
         div::after{
            font-family: 'iconfont'; 
            /* 这里是需要转义的 &#xe603; */
             content:'\e84f';  
        } 
     </style>
</head>
<body>
    <!-- 3、使用类名设置 -->
     <div class="iconfont icon-jiantou">查看全部<span class="iconfont icon-jiantou"></span></div>
</body>
</html>

2、平面转换

2.1、平面转换的概念

平面转换就是使用CSS3当中的属性进行元素的位移，缩放，旋转等效果

平面转换

改变盒子在平面内的形态（位移、旋转、缩放）
2D转换(只涉及到x轴和y轴)

CSS当中的平面转换的属性

transform

在这里插入图片描述

2.2、位移

语法
- 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>

2.3、位移绝对定位居中

核心代码

div{
    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.4、车开门案例

在这里插入图片描述

<!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/bg.jpg');
            overflow: hidden;
        }
        
        .box::before,
        .box::after {
            float: left;
            content: '';
            width: 50%;
            height: 600px;
            background-image: url(./images/fm.jpg);
            transition: all .5s; /*默认就是all 不写也不会报错，也可以写transform*/
        }

        .box::after {
            background-position: right 0;
        }

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

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

<body>
    <div class="box">

    </div>
</body>

</html>

2.5、小米logo位移案例

在这里插入图片描述

<!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 auto;
            padding: 0;
        }
        .box{
            width: 56px;
            height: 56px;
            background-color: blue;
            overflow: hidden;
            margin-top: 200px;
        }
        .box a{
            display: block;
            width: 200%;
            height: 56px;
            background-color: purple;
            transition: all .3s;
        }
        .box a::before{
           float: left; 
           content: '';
           width: 56px;
           height: 56px;
           background-color: red;
        }
        .box a::after{
           float: left;
           content: '';
           width: 56px;
           height: 56px;
           background-color: green;
        }
        .box:hover a{
            transform: translateX(-56px);
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="www.mi.com"></a>
    </div>
</body>
</html>

2.6、旋转

语法
- transform: rotate(角度);
- 注意：角度单位是deg
技巧：取值正负均可
- 取值为正, 则顺时针旋转正----顺时针
- 取值为负, 则逆时针旋转负----逆时针

在这里插入图片描述

2.7、旋转的原点设置

语法
- 默认圆点是盒子中心点
- 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;
            /* 默认中心点 旋转 */
            transform-origin:center center;
            /* 以左上角为中心点 */
            transform-origin: right bottom;
            transform-origin: left bottom;
            /* 写具体的像素值--左上角 */
            transform-origin:0,0 ;
            /* 中心点基本单位写 */
            transform-origin:100,100;
            /* 中心点基本单位写 */
            transform-origin:-100px,-100px;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>
</html>

2.8、旋转百度新闻案例

在这里插入图片描述

<!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>
         .box{
            width: 96px;
            height: 184px;
            background: url("./images/roumer_033b02b.png") center;
            margin: 100px auto;
            overflow: hidden;
            cursor: pointer;
         }
         .box a{
            display: block;
            width: 96px;
            height: 184px;
            background-color: #18448e;
            color: #fff;
            line-height: 184px;
            font-size: 12px;
            text-align: center;
            border-radius: 3px;
            text-decoration: none;
            /* transform-origin: left bottom; */
            transform-origin: -100% 50%;
            transform: rotate(90deg);
            transition: all .3s;
         }
         .box:hover a{
            transform: rotate(0deg);
         }
    </style>
</head>
<body>
      <div class="box">
         <a href="http//www.baidu.com">举报</a>
      </div>
</body>
</html>

2.9、多重转换

在这里插入图片描述

<!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>
        *{
            margin: 0 auto;
            padding: 0;
        }
        .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/tyre.png" alt="">
    </div>
</body>

</html>

2.1、缩放

如何缩放一个元素
- 思考：改变元素的width或height属性能实现吗？
语法
- transform: scale(x轴缩放倍数, y轴缩放倍数);
技巧
- 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
  - transform: scale(缩放倍数);
  - scale值大于1表示放大, scale值小于1表示缩小

在这里插入图片描述

2.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>
        *{
            margin: 0 auto;
            padding: 0;
        }
        .box{
            width: 1040px;
            height: 200px;
            /* border: 1px solid; */
            margin-top: 30px;
        }
        .box ul li{
            float: left;
            width: 200px;
            height: 200px;
            text-decoration: none;
            list-style: none;
            overflow: hidden;
        }
        .box ul li img{
            width: 200px;
            height: 200px;
        }
        .box ul li:not(:last-child){
            margin-right: 10px;
        }
        img{
            transition: all .3s;
        }
        .box ul li:hover img{
           transform: scale(1.1); 
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="./images/20240131072208817.png" alt=""></li>
            <li><img src="./images/20240131072208817.png" alt=""></li>
            <li><img src="./images/20240131072208817.png" alt=""></li>
            <li><img src="./images/20240131072208817.png" alt=""></li>
            <li><img src="./images/20240131072208817.png" alt=""></li>
        </ul>
    </div>
</body>
</html>

2.3、和平精英缩放案例

在这里插入图片描述

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

        li {
            list-style: none;
        }

        img {
            width: 100%;
        }

        .box {
            width: 249px;
            height: 210px;
            margin: 50px auto;
            overflow: hidden;
        }
        
        .box p {
            color: #3b3b3b;
            padding: 10px 10px 0 10px;
        }

        .box .pic {
            position: relative;
        }

        .box .pic::after {
            /* 播放按钮压在图片上面 - 居中 */
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -29px;
            margin-top: -29px; */
            /* transform: translate(-50%, -50%); */

            content: '';
            width: 58px;
            height: 58px;
            background-image: url(./images/play.png);

            /* 大图 */
            transform: translate(-50%, -50%) scale(5);

            /* 透明,看不见 */
            opacity: 0;
            transition: all .5s;
        }

        /* lihover的时候,  谁变小pic::after 样式覆盖会丢失位移效果记得自己加上*/
        .box li:hover .pic::after {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic"><img src="./images/party.jpeg" alt=""></div>
                <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
            </li>
        </ul>
    </div>
</body>
</html>

2.4、倾斜

属性
- transform: skew()
取值
- 角度度数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>
         .box{
            margin: 100px auto;
            width: 100px;
            height: 100px;
            background-color: pink;
            transition: all .5s;
         }
         div:hover{
            transform: skew(30s);
            transform: skew(-30deg);
         }
    </style>
</head>
<body>
     <div class="box"></div>
</body>
</html>

2.5、渐变

渐变是多个颜色逐渐变化的视觉效果

一般用于设置盒子的背景

background-images:linear-gradient(颜色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>
        .box{
            width: 400px;
            height: 200px;
            /* 线性渐变 */
            background-image:linear-gradient(red,blue,green,yellow);
            /* 调整度数改变进行渐变 */
            background-image:linear-gradient(45deg,blue,green);
            /* 方位 */
            background-image:linear-gradient(to left,blue,green);
            /* 从上往下 */
            background-image:linear-gradient(to top,blue,green);

            /* 径向渐变 */
            background-image: radial-gradient(pink,purple);
            /* 透明度渐变 */
            background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6)); 
            /* 透明度渐变  */
            background-image: linear-gradient(transpare,rgba(0,0,0,.6)); 
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2.6、华为综合案例

在这里插入图片描述

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    /* 解决图片底层空白缝隙的问题*/
    vertical-align: middle;
}

.box {
    width: 1110px;
    height: 247px;
    margin: 20px auto;
    /* background-color: pink; */
}

.box li {
    position: relative;
    float: left;
    width: 350px;
    height: 247px;
    margin-right: 30px;
    overflow: hidden;
}

.box li:last-child {
    margin-right: 0;
}

.box .txt {
    position: absolute;
    left: 0;
    bottom: -50px;
    width: 350px;
    height: auto;
    padding: 20px 30px;
    z-index: 1;
    color: #fff;
    transition: transform .5s;
    /* transition: all .5s; */
}

.box .txt h4 {
    font-size: 14px;
    font-weight: 400;
    line-height: 2em;
    color: #fff;
}

.box .txt h5 {
    margin-bottom: 40px;
    font-size: 18px;
    line-height: 1.5em;
    color: #fff;
}

.box .txt p {
    color: #fff;
    font-size: 14px;
}

.box .txt p .iconfont {
    color: #c7000b;
    vertical-align: middle;
    font-size: 20px;
    font-weight: 700;
}

/* 1. 渐变背景的盒子 */
.box .mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 350px;
    height: 247px;
    background-image: linear-gradient(
        transparent,
        rgba(0,0,0,.6)
    );
    opacity: 0;
    transition: all .5s;
}

/* 2. hover效果 */
/* 2.1 图片缩放 */
.box li .pic img {
    transition: all .5s;
}
.box li:hover .pic img {
    transform: scale(1.2);
}


/* 2.2 渐变背景显示 */
.box li:hover .mask {
    opacity: 1;
}

/* 2.3 文字向上移动 */
.box li:hover .txt {
    transform: translateY(-50px);
}

<!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="./css/demo.css">
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/product.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>产品</h4>
                        <h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5>
                        <p>
                            <span>了解更多</span>
                            <i></i>
                        </p>
                    </div>

                    <!-- 添加渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/huawei1.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>行业洞察</h4>
                        <h5>迈向智能世界2030</h5>
                        <p>
                            <span>了解更多</span>
                            <i></i>
                        </p>
                    </div>
                    <!-- 添加渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/huawei2.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>《ICT新视界》刊首语</h4>
                        <h5>笃行致远，共建具有获得感、幸福感、安全感的智慧城市</h5>
                        <p>
                            <span>了解更多</span>
                            <i></i>
                        </p>
                    </div>
                    <!-- 添加渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>