Web移动端第一天

微风抚少年
163 阅读5分钟

Web移动端第一天

字体图标

优点

1.灵活 方便修改样式颜色、字体(color font-size)

2.轻量级 体积小、渲染快、降低服务器请求次数

3.兼容性强

4.使用方便

  1. 修改颜色
  2. 修改尺寸

使用方法

1.使用Unicode编码（不常用）

<!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>
    <!-- 1.引入iconfont.css样式表 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        /* 3.设置字体家族 */
        span {
            font-family: "iconfont";
        }

        /* 4.可以设置字体样式来改变字体图标颜色、大小 */
        .s3 {
            color: red;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <!-- 2.设置字体图标 Unicode编码-->
    <span class="s3">&#xe611;</span>
    <span>&#xe61c;</span>
</body>

</html>

2.使用 font-class类名法（经常使用 方便 推荐）

 <!-- 1.引入iconfont.css样式表 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .s1 {
            color: red;
            font-size: 50px;
        }
    </style>
    <!-- 2.设置字体图标 font-class类名-->
    <span class="iconfont icon-yanjing1 s1"></span>
    <span class="iconfont icon-yanjing"></span>

3.在线引入字体图标

使用在线网址引入时，要注意引入前记得加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>在线地址引入图标</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3243645_8568gh9eemr.css ">
    <style>
        .s1 {
            font-size: 100px;
            color: pink;
        }
    </style>
</head>
<body>
    <span class="iconfont icon-Dyanjing s1"></span>
    <span class="iconfont icon-caidan s1"></span>
    <span class="iconfont icon-dianzan s1"></span>
</body>
</html>

4.使用伪类元素添加字体图标

使用伪元素添加字体图标的话直接在伪元素的内容content里面添加Uncicon编码注意不要全部加完

1647244937851.png

注意点

注意其他图标的文件夹和自己制作的图标文件夹名称的区别，别引入错误了

如果图标库里面没有我们需要的图标，可以问美工/UI找svg矢量图自己上传制作

使用矢量图制作字体图标

1647228812217.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>Document</title>
    <link rel="stylesheet" href="./iconfont1/iconfont.css">
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .box{
        width: 210px;
        border: 1px solid #ccc;
        margin: 100px auto;
        box-shadow: 0 0 15px 15px red;
    }
    .s1 {
        color: #000;
        font-size: 100px;
    }
</style>
<body>
    <div class="box">
        <i class="iconfont icon-conversation s1"></i>
        <i class="iconfont icon-delete s1"></i>
    </div>
</body>
</html>

工作中了解

iconfont-class使用原理

字体图标的原理就是在使用元素上加一个伪元素，然后再伪元素的内容content上增加一个Unicon编码。

平面转换

使用平面转换transform属性实现元素的位移、旋转、缩放效果

  1. 平移
  2. 旋转
  3. 缩放

平移

1647259896715.png

平移实现居中效果
1.使用margin方法实现(不推荐)

​ 缺点：当盒子的宽高改变时，需要手动去更改margin属性值，有时候遇到不好计算的时候会比较麻烦。

1647259970943.png

2.使用transform方法实现(推荐)

​ 优点：当盒子更改宽高时，不在需要去更改盒子居中的属性值，非常方便，不需要自己去手动计算。

1647260096920.png

旋转

1647260382250.png

转换原点

1647260446880.png

多重转换(复合旋转)

当位移和旋转共同出现的时候

​ 1 先位移后旋转

​ 2 先旋转后位移

​ 3 以上两个效果不一样！！！

​ 4 原因

​ 当先旋转时在位移的话坐标轴就会发生改变，效果就会不一样

​ 5 建议

​ 先位移再旋转

单位 度 deg

1647260487674.png

1647260498457.png

缩放

使用缩放scale改变元素的尺寸

1647260513626.png

渐变

只能给背景图片添加background-image属性

1647260912160.png

语法

1647260939890.png

1647260988496.png

注意点

过渡

想要实现鼠标移入图片切换的渐变过程的话需要换个思路

1.div里面包裹着两张图片标签

2.先让一张图片display隐藏起来，一张图片显示

3.hover的时候再让另一张图片隐藏，另一张显示

4.定位加透明度来实现 透明度有过渡

过渡的四个属性

  1. 想要实现过渡的css属性名 （宽、高）transition-property: ;

  2. 过渡持续时间transition-duration: ;

  3. 过渡的延迟时间transition-delay: ;

  4. 过渡的速度曲线transition-timing-function: ;

  5. display:none;没有过渡效果

  6. 渐变也没有过渡效果

  7. 背景图片 有过渡效果 但因为浏览器遗留了以前的bug 过渡效果不是很完美(在工作中慎用)

透明
  1. 背景颜色透明
  2. 字体颜色不会变透明
优化

​ 做特效的时候尽量用translate来做，因为css3提出新的技术浏览器看到translate特效的时候浏览器内部专门开启一个做特效的任务，所以带来的优化性能要高的多

华为案例思路

大体来说就算分为三部分

1.先分析主要结构 大结构 html结构

2.再去写css

3.再去考虑hover 过渡 动画效果

1看清楚案例静态结构然后书写标签2样式来实现案例的功能

​ 3真实的开发情况（我们最开始分析的思路不一定全对，会出现反复了解案例和修改代码的情况﹒正确不可避免)4鼠标移上去之后它效果

​ 1图片放大

​ a标签添加hover里面的图片scale缩放!!2 div从下往上移动

​ 3 ????

​ 1盒子的颜色变深不精确的描述需要多花上面的需求多时间和精力去研究需求1 除了文字之外其他都变深了!

​ 2深下到上的渐变!

​ 2分拆如何实现

​ 用什么代码来实现!!

​ 1给a标签加一个渐变（发现无效里面的图片挡住）a标签加一个伪元素定位再去渐变!1既要使用渐变也要使用背景透明色来实现

​ 4 a的伪元素 before最开始没有所有背景透明鼠标移上去之后才出现效果

​ 5总结

​ 1看完早上的第一节课华为案例之后你昨天晚上靠你的能力写到11点也没有写出来-你问题大没有学好

​ 本身案例知识点也不少

​ 2但是案例自己摸索写到11点不是浪费你的时间很有意义!! 鼓励!你已经在学自学!!!.

​ 3综合案例的时候

​ 1要求我们很清楚每一个需求1 需求简单看一眼就懂

​ 2麻烦自己思考请求技术经理产品经理:UI设计师沟通来确认需求和请求帮助!!2要求我们很清楚每一个技术点

​ 1请求别人的帮助的时候别人会给点一些解决方案1有些方案是我们已经掌握理想

​ 2有些方案是我们没有学过就需要去学习!!

​ 3完成一个项目

​ 1沟通能力得到加强

​ 2项目开发的流程得到加强3技术能力得到加强

​ 4业务-需求能力得到加强

avatar
文章
阅读
粉丝