初识前端web

阿良_C
219 阅读3分钟

初识前端web

字体图标

作用 :使用字体图标实现网页中简洁的效果图标。

优点：可以灵活改变图标的样式大小跟颜色

(一)使用方法

前往字体图标网站 Iconfont：www.iconfont.cn/

  1. 下载字体包

    登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地

  2. 解压之后,将字体包命名为iconfont

  3. 使用link引入iconfont.css文件

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

  4. 引入行内元素标签,例如i,em等,调用字体图标

        <i class="iconfont icon-xx"></i>

    其中的icon-xx 是字体图标的 Font class 中的类名,复制即可使用

image-20220312090348760.png

在线引入字体图标：

  1. 在iconfont网站上，生成在线链接

1647239460633.png 2. 复制代码，使用link引入即可 1647239506088.png 个别浏览器需要添加“https:”前缀

<!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="https://at.alicdn.com/t/font_3243645_8568gh9eemr.css 
    ">
    <style>
        .big {
            font-size: 40px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="div">
        <span class="iconfont big icon-Dyanjing"></span>
        <span class="iconfont big icon-caidan "></span>
        <span class="iconfont big icon-dianzan "></span>
    </div>
</body>

</html>

对应的标签引入类名iconfont 跟icon-xx即可

(二)上传矢量图

如果字体图标网站上的素材满足不了我们的需求,可以拿到SVG矢量图,上传到Iconfont 网站www.iconfont.cn/ 生成字体图标

操作方法:

  1. 打开网站,点击上传图标准备上传

image-20220312090848155.png

  1. 点击上传图标,选中自己想要上传的SVG矢量图,选中之后点击打开

image-20220312091037931.png

  1. 部分SVG上传之后会有颜色,我们点击去除颜色,后面引用图标的时候再进行样式设置即可,更加灵活

image-20220312091326366.png

  1. 上传成功之后,加入购物车---添加到项目下载即可

image-20220312091440504.png

平面转换

作用:改变盒子在平面内的形态,实现元素的平移 旋转 缩放

(一)平移translate

1.基本使用方法

语法:

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

取值(可正可负):

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

  1. 像素单位px

     transform: translate(50px,50px);

  2. 百分比(以盒子自身尺寸为参照物)

     transform: translate(-50%,50%);

技巧:

  • translate()如果只给出一个值, 表示x轴方向移动距离

    transform:translat(20px,0)
等同于
transform:translat(20px)

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

2.位移-绝对定位居中

使用translate快速实现绝对定位的元素居中效果

    <style>
        .box {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 100px auto;
        }

        .box1 {
            /* 使用绝对定位+平移 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
    </head>

    <body>
        <div class="box">
            <div class="box1"></div>
        </div>
    </body>

(二)旋转rotate

作用:使用rotate实现元素旋转效果

  1. 基础用法

    transform: rotate(角度deg);

  2. 技巧：取值正负均可

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

(三)转换原点

作用:通过改变旋转的中心点来实现不同的效果

  1. 语法:

       transform-origin: 原点水平位置 原点垂直位置;

  2. 取值:

    • 方位名词（left、top、right、bottom、center）
      • 像素单位数值(50% 50% 系统默认)
      • 百分比(参照盒子自身尺寸计算)

1647246490240.png

(四)多重转换

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

  1. 转换原理

    • 旋转会改变网页元素的坐标轴向
    • 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
  • 先旋转的时候 物体在旋转坐标系也在旋转建议先位移再旋转

  1. 语法:

     transform: translate(800px) rotate(360deg);

    中间用空格隔开

(五)缩放scale

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

  1. 语法:

    transform: scale(x轴缩放倍数, y轴缩放倍数);
如果只写一个数值，就默认下x，y默认使用该值

  2. 技巧:

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

  • 单闭合标签不支持伪元素

渐变

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

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

  1. 语法

      background-image: linear-gradient(transparent,
  rgba(0, 0, 0, .7));
/*是从透明开始渐变 */

    划分颜色的高度

    <!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>
        .box {
            width: 200px;
            height: 200px;
            /* background-color: pink; */
            margin: 100px auto;
            background-image: linear-gradient(red 10%, black 40%, yellow 70%, blue 100%);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

  2. 改变渐变的方向：

1647253600358.png

<!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>
        .box {
            width: 200px;
            height: 200px;
            /* background-color: pink; */
            margin: 100px auto;
            /* 从下往上渐变 */
            /* background-image: linear-gradient(to top, red 10%, black 40%, yellow 70%, blue 100%); */

            /* 从左到右 */
            /* background-image: linear-gradient(to right, red 10%, black 40%, yellow 70%, blue 100%); */

            /* 从右上角 */
            /* background-image: linear-gradient(to right top, red 10%, black 40%, yellow 70%, blue 100%); */
            /* 可以通过设置角度来改变渐变方向 */
            background-image: linear-gradient(20deg, red, black, yellow, blue);

        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>
avatar
文章
阅读
粉丝