第一天字体图标平面转换渐变的应用拓展margin和2d位移的区别

最新推荐文章于 2024-06-20 15:06:48 发布

@钱多多

最新推荐文章于 2024-06-20 15:06:48 发布

阅读量129

点赞数

文章标签：前端 css3

本文链接：https://blog.csdn.net/weixin_61487025/article/details/126052668

版权

今日学习目标*

• 字体图标

• 平面转换

• 渐变

1.字体图标

1.1字体图标的使用

步骤：1、登录iconfont官网，选择对应的字体图标添加到购物车

2、下载选择好的字体图标（添加到项目进行下载）

3、解压下载好的字体图标文件

4、把相关文件拖到项目文件夹中

5、按照提示使用字体图标

<!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>
    <link rel="stylesheet" href="./fonts/iconfont.css">
</head>
<body>
    <i class="iconfont icon-gouwuchekong"> </i>
    <span class="iconfont icon-arrow-down"></span>
</body>
</html>

最好用i/ span/ em标签字体图标属于行内元素

购物车案例

 <link rel="stylesheet" href="./fonts/iconfont.css">
   <style>
    div {
        width: 100px;
        height: 40px;
        background-color: #f0f;
        line-height: 40px;
        text-align: center;
    }
    .font {
        color: #f84510;
    }
    
   </style>
</head>
<body>
    <div>
        <i class="iconfont icon-gouwuchekong font"></i>
        购物车
       <span class="iconfont icon-arrow-down"></span>
    </div>
</body>

1.1.1字体图标的缩写

.font {
            font-size: 50px;
            font-weight: 700;
            color: #f0f;
        }
        /* 这里字体大小不生效 因为标签选择器<类选择器 */
        /* i {
            font-size: 50px;
        } */

1.2.unicode的写法

引入字体图标的css样式

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

 <i class="iconfont"> &#xe666;</i>
    <span class="iconfont">&#xe665;</span>

1.3.伪元素的使用

<link rel="stylesheet" href="./fonts/iconfont.css">
<style>
   i::after {
       content: '\e666';
   }
   span::before {
       content :'\e667';
   }
</style>
</head>
<body>
<i class="iconfont"></i>
<span class="iconfont"></span>
</body>

2.平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果

2.1 平面转换概念

平面转换：改变盒子在平面内的形态（位移、旋转、缩放）

属性：transform

2.2 平面转换之位移

代码：

transform: translate(100px, 100px);

取值：1、像素+px

2、百分比（参照物为盒子自身尺寸）

注意：X轴正向为右，Y轴正向为下

技巧：1、translate()如果只给出一个值，表示x轴方向移动距离

2、单独设置某个方向的移动距离：translateX() & translateY()

2.2.1 位移-绝对定位居中

代码：

position: absolut*;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

2.2.2、平面转换之旋转

语法：

transform: rotate(旋转角度);

注意：角度单位是deg

技巧：1、取正值，则为顺时针旋转

2、取负值，则为逆时针旋转

• 设置旋转中心点

语法：

transform-origin: right bottom;

注意：盒子默认以中心点为旋转中心点

取值：1、方位名词（left、top、right、bottom、center）

2、像素单位数值

3、百分比（参照盒子自身尺寸计算）

• 多重转换

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

代码：

transform: translateX(600px) rotate(360deg);

2.2.3 平面转换之缩放

语法：

transform: scale(x轴缩放倍数, y轴缩放倍数)

技巧：1、一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放

2、scale值大于1表示放大，scale值小于1表示缩小
    > **注意：  一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放**
    >   >**transform: scale(缩放倍数)**

3.渐变

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

代码：

background-image: linear-gradient(red, green, blue);

拓展

margin和2d位移的区别

margin :1.移动的100%是屏幕的大小

2.magin移动的盒子会影响其他的元素

2d位移: 1.移动的100%自己本身的大小.

2.2d唯一移动盒子不影响其他的元素并且不脱离标准流

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .one {
            /* margin-right: 100%;
            margin-top: 50px; */
            transform: translateY(50px)
        }
        .two {
            transform: translateX(100%);
            background-color: yellowgreen;
    </style>
</head>
<body>
    <div class="one">1</div>
    <div class="two">123</div>
</body>
</html>

@钱多多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一天字体图标平面转换渐变的应用拓展margin和2d位移的区别

字体图标平面转换渐变的应用拓展margin和2d位移的区别margin :1.移动的100%是屏幕的大小2.magin移动的盒子会影响其他的元素2d位移: 1.移动的100%自己本身的大小.2.2d唯一移动盒子不影响其他的元素并且不脱离标准流...
复制链接

扫一扫