字体图标的使用-补充、calc计算属性-拓展1、完美的动画轮播-拓展2

爱喝牛奶~

已于 2022-04-10 17:28:23 修改

阅读量786

点赞数 1

文章标签： css css3 echarts html5 jquery

于 2022-04-08 21:40:36 首次发布

本文链接：https://blog.csdn.net/qq_52301431/article/details/123967560

版权

一、字体图标的使用-补充

二、calc计算属性-拓展1

（1）calc() 只作用于属性值

（2）CSS很多长度都可以与calc()一起使用

（3）不能在媒体查询中使用

（4）calc()的数学运算符

加法(+)和减法(-)要求这两个数都是长度

一、字体图标的使用-补充

1、搜索阿里巴巴矢量图标库进入官方网站

2、找到自己喜欢的图标不要下载下载就是图片点击加入购物车

3、右上角找到自己的购物车添加至项目第一次需要新建项目

4、添加项目后将会跳转到新界面点击下载至本地按钮进行下载

5、解压之后找到最后层级目录下的文件，拷贝至自己项目专门放字体图标的地方

6、打开生成的文件中的demo_index.html按照步骤使用字体图标

<!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="./font/iconfont.css">
    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <span class="iconfont">&#xf4d0;</span>
    <span class="iconfont icon-bianji"></span>
    <svg class="icon" aria-hidden="true" style="font-size: 40px;">
        <use xlink:href="#icon-dianzan"></use>
    </svg>
    <script src="./font/iconfont.js"></script>
</body>
</html>

二、calc计算属性-拓展1

（1）calc() 只作用于属性值

你唯一可以使用calc()函数的地方是在值中。

.el {
    font-size: calc(3vw + 2px);
    width:     calc(100% - 20px);
    height:    calc(100vh - 20px);
    padding:   calc(1vw + 5px);
}

（2）CSS很多长度都可以与calc()一起使用

px
%
em
rem
vh
vw
vmin
vmax 等

（3）不能在媒体查询中使用

@media (max-width: 40rem) {
  /* Narrower or exactly 40rem */
}

/* Nope! */
@media (min-width: calc(40rem + 1px)) {
  /* Wider than 40rem */
}

（4）calc()的数学运算符

你已经有了+、-、*和/，但它们在使用方法上有所不同。

加法(+)和减法(-)要求这两个数都是长度

.el {
  /* 有效的 */
  margin: calc(10px + 10px);

   /* 无效的 */
  margin: calc(10px + 5);
}

除法(/)要求第二个数字是无单位的。

.el {
  /* 有效的 */
  margin: calc(30px / 3);

  /* 无效的 */
  margin: calc(30px / 10px);

  /* 无效的  (不能除以0) */
  margin: calc(30px / 0);
}

**乘法(*)要求其中一个数是无单位的。**

.el {
  /* 有效的 ? */
  margin: calc(10px * 3);

  /* 有效的 ? */
  margin: calc(3 * 10px);

  /* 无效的 ? */
  margin: calc(30px * 3px);
}

（5）空白空间很重要

对于加法和减法来说是这样的。

.el {
  /* 有效的 */
  font-size: calc(3vw + 2px);

  /* 无效的 */
  font-size: calc(3vw+2px);

  /* 有效的 */
  font-size: calc(3vw - 2px);

  /* 无效的 */
  font-size: calc(3vw-2px);
}

三、完美的动画轮播-拓展2

<!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>07-设置动态html-动态-fontsize</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html {
            font-size: calc(100vw / 750);
        }
        .swiper {
            width: 100vw;
            height: 280.3rem;
            overflow: hidden;
            margin-top: 20rem;
        }
        .swiper .swiper-img {
            width: 500vw;
            height: 280.3rem;
            display: flex;
            justify-content: space-around;
            animation: lunbo 8s infinite;
        }
        
        .swiper-img img {
            width: 100vw;
            height: 280.3rem;
        }
        @keyframes lunbo {
            /* 
                有几张图片就通过100 / 几，得到的值就可以写百分比
                表示第一张图停顿时间为20% 
            */
            0%,
            20% {
                transform: translateX(0);
            }
            /* 表示第一张图到第二张图的动画时间为5% */
            25%,
            45% {
                transform: translateX(-100vw);
            }
            50%,
            75% {
                transform: translateX(-200vw);
            }

            80%,
            95% {
                transform: translateX(-300vw);
            }
            /* 
                表示倒数第二张到最后一张图片的动画时间为5% 
            */
            100% {
                transform: translateX(-400vw);
            }
            /* 
                然后最后一张图和第一张图片一样，在当动画完成时，继续从第一张开始重复动画，又停顿在第一张图，
                所以看到的效果就是无间隙的轮播动画 
            */
        }
    </style>
</head>

<body>
    <div class="swiper">
        <div class="swiper-img">
            <img src="../移动端布局/img/swiper01.jpg" alt="">
            <img src="../移动端布局/img/swiper02.jpg" alt="">
            <img src="../移动端布局/img/swiper03.jpg" alt="">
            <img src="../移动端布局/img/swiper04.jpg" alt="">
            <img src="../移动端布局/img/swiper01.jpg" alt="">
        </div>
    </div>
</body>

</html>