移动Web——字体图标-平面转换-渐变

zhuim521 • 2022-03-10 • CSS

字体图标

目标：使用字体图标技巧实现网页中简洁的图标效果

l 字体图标

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

字体图标的优点：
Ø 灵活性：灵活地修改样式，例如：尺寸、颜色等
Ø 轻量级：体积小、渲染快、降低服务器请求次数
Ø 兼容性：几乎兼容所有主流浏览器
Ø 使用方便：
1. 下载字体包
2. 使用字体图标

上传矢量图：

l 思考：如果图标库没有项目所需的图标怎么办？
l 答：IconFont网站上传矢量图生成字体图标
Ø 1. 与设计师沟通，得到SVG矢量图
Ø 2. IconFont网站上传图标，下载使用

平面转换

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

平面转换
Ø 改变盒子在平面内的形态（位移、旋转、缩放）
Ø 2D转换
l 平面转换属性
Ø transform

目标：使用translate实现元素位移效果

l 语法
Ø transform: translate(水平移动距离X, 垂直移动距离Y);
l 取值（正负均可）
Ø 像素单位数值
Ø 百分比（参照物为盒子自身尺寸）

如果取百分比的话：取值是取盒子尺寸宽高的百分比

注意：X轴正向为右，Y轴正向为下
l 技巧
Ø translate()如果只给出一个值, 表示x轴方向移动距离
Ø 单独设置某个方向的移动距离：translateX() & translateY()

盒子垂直居中方法

<style>
        .box{
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
            
        }
        /* 1.水平居中：将顶部和右侧都移动到百分之50，然后在设置顶部和右侧内边距减去自身的一般 */
        /* .father{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
            width: 100px;
            height: 100px;
            background-color: black;

        } */
        /* 2.水平居中 :子绝父相，将上下左右的边框都设置为0，然后设置内边距为auto（自动居中）*/
        /* .father{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: black;

        } */
        /* 3.水平居中:将顶部和右侧都移动到百分之50,然后利用位移移动x轴和y轴，位移自身的一般达到居中 */
        .father{
            position: absolute;
           left: 50%;
           top: 50%;
           transform: translate(-50%,-50%);
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: black;

        }
    </style>
</head>
<body>
    <div class="box">
        <div class="father"></div>
    </div>

 

目标：使用rotate实现元素旋转效果

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

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

l 语法
Ø 默认圆点是盒子中心点
Ø transform-origin: 原点水平位置 原点垂直位置;
l 取值
Ø 方位名词（left、top、right、bottom、center）
Ø 像素单位数值
Ø 百分比（参照盒子自身尺寸计算）

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

l 多重转换技巧

transform：translate(移动的方位：X,Y) rotate（旋转的角度：ndeg）

transform中的rotate属性必须放到最后一位

 

目标：使用scale改变元素的尺寸

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

图片从大变小时，可以用 opacity 样式将大图透明化

（透明度）opacity的取值是0-1

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

l 渐变是多个颜色逐渐变化的视觉效果
l 一般用于设置盒子的背景

backg-image：linea-gradien（
   颜色1，
   颜色2
）

渐变默认方向（to bottom）从上往下走

语法：（第一个参数可以设置方向）

background-image: linear-gradient(to right,red,blue,pink);

 

版权声明：
作者：zhuim521
链接：https://zhuimwl.com/61.html
来源：追梦博客
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
海报
移动Web——字体图标-平面转换-渐变
字体图标 目标：使用字体图标技巧实现网页中简洁的图标效果 l 字体图标 Ø 字体图标展示的是图标，本质是字体。 Ø 处理简单的、颜色单一的图片 字体图标的优点……
<<上一篇
下一篇>>