CSS-动画及额外补充

香菜香菇
175 阅读8分钟

transform

transform属性允许对某一个元素进行某些形变, 包括旋转，缩放，倾斜或平移等。对于行内级非替换元素是无效的，比如对span、a元素等

常见的函数transform function有：

  • 平移：translate(x, y) ，一个值时设置 x 轴上的位移, 二个值时设置 x 轴和 y 轴上的位移

    值类型：

    1. 数字：100px
    2. 百分比：如果设置X的位移，参照的是自身的宽度，如果设置Y的位移，参照的是自身的高度

  • 缩放：scale(x, y)一个值时设置 x 轴上的缩放, 二个值时设置 x 轴和 y 轴上的缩放

    值类型：

    1. 数字：1不变，2放大一倍， 0.5缩小一半
    2. 百分比：百分比不常用

  • 旋转：rotate(deg)

    值类型：常用单位deg(旋转角度)，正数为顺时针，负数为逆时针；弧度（radians）一圈是2π，百分度（gradians）将圆分成400份、或圈数（turns）；

image.png

  • transform-origin：形变坐标原点，一个值设置x轴的原点，两个值设置x轴和y轴的原点

    值类型：

    1. eft, center, right, top, bottom关键字
    2. length：从左上角开始计算
    3. 百分比：参考元素本身大小
transform-origin:top left;

image.png

  • 倾斜：skew(x, y)，一个值时，表示x轴上的倾斜，二个值时，表示x轴和y轴上的倾斜

    值类型：deg(倾斜角度)，正数为顺时针，负数为逆时针

transform设置多个值

transfore:translate(100px) scale(0.5) rotade(45deg);

transition动画

transitions 提供了一种在更改CSS属性时控制动画速度的方法，比如将一个元素从一个位置移动到另外一个位置，让这个过程加上一定的动画效果，包括一定的曲线速率变化

是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性

transition:all 1s ease-in 1s;

  • transition-property：指定应用过渡属性的名称

    all：所有属性都执行动画；

    none：所有属性都不执行动画；

    CSS属性名称：要执行动画的CSS属性名称，比如width、left、transform等；

  • transition-duration：指定过渡动画所需的时间，单位可以是秒（s）或毫秒（ms）

  • transition-timing-function：指定动画的变化曲线, developer.mozilla.org/zh-CN/docs/…

  • transition-delay：指定过渡动画执行之前的等待时间

英语词汇的区分

transform是形变：后面的值是形变的函数，比如scale、rotate、translate

translate是其中一个transform-function：对元素进行平移，例：trancsform: translate（1px,1px）;

transition是过渡的意思: 它本身也有转变的含义，但是更多表示的是过渡的过程

Animation动画

  • 过渡动画有如下的缺点：

    1. 只能定义开始状态和结束状态，不能定义中间状态
    2. 不能重复执行，除非一再触发动画
    3. 需要在特定状态下会触发才能执行，比如某个属性被修改了

  • Animation的使用分成两个步骤：

    步骤一：使用keyframes定义动画序列（每一帧动画如何执行）

    步骤二：动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等等

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

  // from相当于 0%   to相当于 100%
@keyframes moveAnim{
  0% {
      transform: translate(0,0);
  }
  33%{
      transform: translate(0,200px);
  }
  66%{
      transform: translate(200px,200px);
  }
  100%{
      transform: translate(200px,0);
  }
 }
 
.box{
  width: 200px;
  height: 200px;
  background: yellow;
  /* box要执行的moveAnim的动画 */
  animation-name: moveAnim; /*动画名称*/
  animation-duration: .3s; /*动画所需时间*/
  animation-timing-function: ease-in-out; /*动画运动曲线*/
  /* 其他属性： */
  animation-delay: 2s; /*执行前等待时间*/
  animation-iteration-count: 2;/*动画执行的次数，infinite无限循环*/
  animation-direction: reverse; /* 动画执行的方向 normal普通的  revert反转*/
  animation-fill-mode: none; /*执行动画最后保留哪一个值,none：回到没有执行动画的位置,forwards：动画最后一帧的位置,backwards：动画第一帧的位置*/
  
  /*简写属性*/
  animation: moveAnim 3s ease-in-out 2s 2 reverse none;
}

vertical-align

vertical-align会影响 行内块级元素 在一个 行盒 中垂直方向的位置

一个div没有设置高度的时候，会不会有高度？

  • 没有内容，没有高度
  • 有内容，内容撑起来高度,内容有行高（line-height），撑起来了div的高度

行高为什么可以撑起div的高度？

  • 这是因为line boxes的存在，并且line-boxes有一个特性，包裹每行的inline level
  • 而其中的文字是有行高的，必须将整个行高包裹进去，才算包裹这个line-level

image.png

image.png

vertical-align的其他值:

baseline(默认值)：基线对齐（先明白什么是基线）

top：把行内级盒子的顶部跟line boxes顶部对齐

middle：行内级盒子的中心点与父盒基线加上x-height一半的线对齐

bottom：把行内级盒子的底部跟line box底部对齐

<percentage>：把行内级盒子提升或者下降一段距离（距离相对于line-height计算\元素高度）， 0%意味着同baseline一样

<length>：把行内级盒子提升或者下降一段距离，0cm意味着同baseline一样

解决图片下边缘的间隙方法:

方法一: 设置成top/middle/bottom

方法二: 将图片设置为block元素

HTML5新增元素

语义化的元素

<header>：头部元素

<nav>：导航元素

<section>：定义文档某个区域的元素

<article>：内容元素

<aside>：侧边栏元素

<footer>：尾部元素

image.png

增加了对媒体类型的支持

  • 音频：<audio>
<audio src="./deme.mp3" controls autoplay muted>
  <source src="./deme.ogg"> // 通过元素指定更多格式的源
  <p> 你的浏览器不支持audio元素</p> // 通过p/div等元素指定在浏览器不支持video元素的情况, 显示的内容
</audio>

image.png

  • 视频：<video>
  1. 通过元素指定更多视频格式的源;
  2. 通过p/div等元素指定在浏览器不支持video元素的情况, 显示的内容;
<video src="./deme.mp4" controls autoplay muted>
  <source src="./deme.webm"> 
  <p> 你的浏览器不支持video元素</p> 
</video>

image.png

使用方式有两个：一方面我们可以直接通过元素使用video和autio；另一方面我们可以通过JavaScript的API对其进行控制

input元素的扩展

表单新增属性： placeholder：输入框的占位文字 multiple：多个值 autofocus：最多输入的内容

input的type类型：developer.mozilla.org/zh-CN/docs/…

全局属性data-*

在小程序中, 就是通过data-来传递数据的

<div class="box" data-name="wqq" data-age="21" data-height="1.65"></div>
<script>
  const boxEl = document.querySelector('.box')
  console.log(boxEl.dataset);
</script>

image.png

white-space

white-space用于设置空白处理和换行规则

`normal`：默认值，合并所有连续的空白，允许单词超屏时自动换行

nowrap：会合并空白，不会自动换行

pre：不会合并空白，不自动换行

pre-wrap：不合并空白，会自动换行

pre-line：合并所有连续的空白（但保留换行），会自动换行

CSS中的函数

  • var: 使用CSS定义的变量;
<div class='box'>文字</div>

 :root {
    /*定义了一个变量,只有后代元素可以使用*/
    --main-color: #f6d944
}
.box{
    color: var(--main-color);
}
  • calc: 计算CSS值, 通常用于计算元素的大小或位置;

计算支持加减乘除的运算；✓ + 和 - 运算符的两边必须要有空白字符

<div class="box">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
</div>

.box{
    width: 300px;
    height: 200px;
    background-color: #18e7e0;
}
.item{
    height: 50px;
}

.item1{
    /*width的宽度相对于包含块（父元素），定位情况比较特殊*/
    width: calc(100% - 100px) ;
    color: #e7b718;
}

.item2{
    width: 100px;
    color: #cb5b93;
}
  • blur: 毛玻璃(高斯模糊)效果;

filter: 将模糊或颜色偏移等图形效果应用于元素;

<img src="./aaaaaaa.webp" alt="">

img{
    /*10px:模糊半径，值越大, 图片越模糊*/
    filter: blur(10px);
}

backdrop-filter: 为元素后面的区域添加模糊或者其他效果;

<div class="box">
    <img src="./aaaaaaa.webp" alt="">
    <div class="cover"></div>
</div>

.box{
    display: inline-block;
    position: relative;
}

.box img{
    display: block;
}

.cover{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.5); /*本身没有半透明效果，给它增加透明效果*/
    backdrop-filter: blur(10px);
}
  • gradient：颜色渐变函数；

linear-gradient()：创建一个线性渐变的图片；

<div class='box'></div>

.box{
    width: 200px;
    height: 200px;
    /*background-image: linear-gradient(red,goldenrod);*/
    /*background-image: linear-gradient(to right,red,goldenrod); !*从左到右*!*/
    background-image: linear-gradient(to right top,red,goldenrod); /*左下角到右上角*/
}

BFC(Block Formatting Context)

BFC(块级格式上下文)概况如下：

  1. 在BFC中，box会在垂直方向上一个挨着一个的排布；
  2. 垂直方向的间距由margin属性决定；
  3. 在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；
  4. 在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的；

作用：

  1. 在同一个BFC中，相邻两个box之间的margin会折叠
  2. BFC可以解决浮动高度塌陷，可以实现清除浮动的效果，需要满足两个条件：浮动元素的父元素触发BFC，形成独立的块级格式化上下文；浮动元素的父元素的高度是auto的；

媒体查询

媒体查询是一种提供给开发者针对不同设备需求进行定制化开发的一个接口

// 通过@media和@import使用不同的CSS规则（常用）
@import url(./mini.css) (max-width:800px);

// 使用media属性为<style>, <link>, <source>和其他HTML元素指定特定的媒体类型
<link rel="stylesheet" href="./mini.css" media="(max-width:800px)">

// 使用Window.matchMedia() 和MediaQueryList.addListener() 方法来测试和监控媒体状态
@media (max-width:800px) {
  body {
     background-color: #18e7e0;
  }
}

媒体类型

all：适用于所有设备。

print：适用于在打印预览模式下在屏幕上查看的分页材料和文档。

screen（掌握）：主要用于屏幕。

speech：主要用于语音合成器。

媒体特性

  1. 通常会将媒体特性描述为一个表达式；
  2. 每条媒体特性表达式都必须用括号括起来；

image.png

逻辑操作符

// 宽度小于800大于500
@media (max-width:800px) and (min-width: 500px) {
    body{
        background-color: #18e7e0;
    }
}

常见的移动端设备

image.png

avatar
文章
阅读
粉丝