第二章:CSS基础进阶-part2:CSS过渡与动画

文章目录

  • [CSS3 过渡动画](#CSS3 过渡动画)
  • 一、transition属性
  • 二、transform属性-2D变换
    • [2.1 tanslate : 移动](#2.1 tanslate : 移动)
    • [2.2 rotate-旋转](#2.2 rotate-旋转)
    • [2.3 scale-变形](#2.3 scale-变形)
    • [2.4 skew-斜切](#2.4 skew-斜切)
    • [2.5 transform-origin: 变换中心点设置](#2.5 transform-origin: 变换中心点设置)
  • 三、CSS3关键帧动画
  • 四、CSS3-3D变换
    • [4.1 perspective 定义3D元素距视图距离](#4.1 perspective 定义3D元素距视图距离)
    • [4.2 transform-style](#4.2 transform-style)
    • [4.3 3D位移- translate3d](#4.3 3D位移- translate3d)
    • [4.4 3D旋转- rotate(x,y,z,a)](#4.4 3D旋转- rotate(x,y,z,a))
    • [4.5 3D缩放](#4.5 3D缩放)
    • [4.6 多重变形](#4.6 多重变形)

CSS3 过渡动画

一、transition属性

过渡是元素从一种样式逐渐改变为另一种的效果.它主要通过transition四个过渡属性来控制:transition-property、transition-duration、transition-timing-function、transition-delay(四个属性也可以合并简写成: transition)。

语法:
transition: property duration timing-function delay;

1、transition-property

  • transition-property 属性规定应用过渡效果的 CSS 属性的名称(当指定的 CSS 属性改变时,过渡效果将开始)
  • transition-property: none |all |property; 过渡属性
    • none:没有属性会获得过渡效果。
    • all: 所有属性都将获得过渡效果
    • property:定义应用过渡效果的CSS 属性名称列表,列表以逗号分隔

2、transition-duration:过渡时间

  • transition-duration: time
    • time规定完成过渡效果需要花费的时间 (以秒或毫秒计)
    • 默认值是 0,意味着不会有效果

3、transition-timing-function:缓动函数

  • linear: 以相同速度开始至结束的过渡效果 (cubic-bezier(0,0,1,1))

  • ease: 慢速开始,然后变快,慢速结束 (cubic-bezier(0.25,0.1,0.25,1))

  • ease-in: 以慢速开始的过渡效果 (cubic-bezier(0.42,0,1,1))

  • ease-out: 以慢速结束的过渡效果 (cubic-bezier(0,0,0.58,1))

  • ease-in-out: 以慢速开始和结束的过渡效果 (cubic-bezier(0.42,0,0.58,1))

  • cubic-bezier(n,n,n,n): 在 cubic-bezier 函数中定义自己的值,可能的值是 0至1之间的数值。

4、transition-delay

  • transition-delay: time;
  • time 规定在过渡效果开始之前需要等待的时间,以秒或毫秒计。
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* transition */
    .box{
      width:300px;
      height: 100px;
      background: pink;
      transition: all .5s linear;
    }
    .box:hover{
      background: cyan;
    }
  </style>
</head>
<body>
 <div class="box"></div>
</body>
</html>

二、transform属性-2D变换

2.1 tanslate : 移动

  • transform:translate(x,y) :平移,x,y可以是像素也可以是百分比

2.2 rotate-旋转

2.3 scale-变形

2.4 skew-斜切

2.5 transform-origin: 变换中心点设置

transform-origin: x y:

  • x:默认值50%,left|center| right,长度,百分比
  • y: 默认值50%,top | center | bottom,长度,百分比
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width:200px;
      height: 200px;
      background: cyan;
    }
    .translate{
      transform: translate(100px,100px);
    }
    .rotate{
      transform: rotate(30deg);
    }
    .scale{
      transform: scale(0.5);
    }
    .skew{
      transform: skew(-50deg);
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="button-group">
    <button class="translate-btn">translate</button>
    <button class="rotate-btn">rotate</button>
    <button class="scale-btn">scale</button>
    <button class="skew-btn">skew</button>
  </div>
  <script>
    var box = document.querySelector(".box")
    var translate = document.querySelector(".translate-btn")
    var rotate = document.querySelector(".rotate-btn")
    var scale = document.querySelector(".scale-btn")
    var skew = document.querySelector(".skew-btn")

    translate.onclick=function(){
      box.className = "box translate"
    }
    rotate.onclick=function(){
      box.className = "box rotate"
    }
    scale.onclick=function(){
      box.className = "box scale"
    }
    skew.onclick=function(){
      box.className = "box skew"
    }
    
  </script>
</body>
</html>

三、CSS3关键帧动画

  • CSS3 关键帧动画通过对关键帧的指定来在页面上产生更复杂的动画效果,以方便制作逐帧动画。
    • 通过"@keyframes 动画名"来定义关键帧
    • 通过animation属性来设置动画信息
    • animation: name duration timing-function delay iteration-count direction fill-mode play-state;
      • animation-name: 指定要绑定到选择器的关键帧的名称(keyframes名),必填项
      • animation-duration: 时长,单位秒或毫秒
      • animation-timing-function: 缓动函数,默认匀速
      • animation-delay: 延迟时间,单位可以是秒(s)或毫秒(ms)
      • animation-iteration-count: 定义动画的播放次数。
        • 值类型:n(数字)| infinite(无限次)
      • animation-direction: 指定是否应该轮流反向播放动画
        • 值包括: normal|reverse|alternate|alternate-reverse|initial|inherit;
        • reverse: 动画反向播放
        • alternate: 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。
        • alternate-reverse: 动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。
        • initial: 设置该属性为它的默认值。
      • animation-fill-mode: 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
        • 可选值:none|forwards|backwards|both|initial|inherit;
        • forwards: 结束时停在最后一帧
        • backwards: 结束时显示第一帧
      • animation-play-state: 指定动画是否正在运行或已暂停
        • 可选值: running(默认) | paused。
html 复制代码
		<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width:100px;
      height: 100px;
      background: pink;
      position: absolute;
      left:0;
      top:0;
      animation: go 2s linear 0s 3 forwards;
    }
    @keyframes go {
      0%{
        left:0;
      }
      100%{
        left:300px;
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

四、CSS3-3D变换

现实世界拍摄的三要素:镜头,拍摄环境的空间,拍摄的物件。CSS 3D的世界里,也要找到并创建这三个物件要素,不过因为在CSS世界里并没有摄影镜头、拍摄的环境的空间等这些真实世界拍摄需要的要素,所以变成用div进行展现,在对应的div 上头加入对应的style属性,就可以进行模拟,我们这里就必须要用到三层div,最外层是摄影镜头,第二层为立体空间,第三层则是立体空间内的立体元素

4.1 perspective 定义3D元素距视图距离

  • perspective属性用来定义3D元素距视图的距离,以像素计,通常和perspective-origin属性一起使用,perspective-origin属性可以改变3D元素的底部位置。
  • perspective-origin属性允许改变3D元素查看3D元素的视图;当为元素定义perspective属性时,其子元素会获得透视效果,而不是元素本身;perspective 属性只影响 3D 转换元素。
  • perspective属性语法格式:
    • perspective: number none
    • number:元素距离视图的距离,以像素计;
    • none:与0相同,不设置透视(默认) :

4.2 transform-style

控制子元素是否开启三维立体环境。。transform-style:flat子元素不开启3d立体空间 默认的.

  • transform-style: preserve-3d;子元素开启立体空间
  • 代码写给父级,但是影响的是子盒子
  • 这个属性很重要,后面必用

4.3 3D位移- translate3d

在CSS3中,3D位移操作主要通过translatezO和translate3d0两个函数实现。其中,translate3d()函数使一个元素在三维空间移动。其基本语法如下: translate3d(tx,ty,tz)

其中,各参数取值说明如下:

  • tx;代表横向坐标位移向量的长度
  • ty:代表纵向坐标位移向量的长度:
  • tz:代表Z轴位移向量的长度。该值不能是一个百分比值,如果取值为百分比值,将被认为是无效值。

4.4 3D旋转- rotate(x,y,z,a)

在三维变形中,可以让元素在任何轴上旋转。CSS3新增4个旋转函数: rotateX0、rotateXO函数允许rotateYO和rotateZ0。一个元素围绕X轴旋转:rotateY0函数允许一个元素围绕Y轴旋转;rotatez()函数允许一个元素围绕Z轴旋转

  • rotateX(a)\rotateY(a)、rotateZ(a)
  • Rotate3d(x,y,z,a)
    • rotate(1,0,0,3) = rotateX(30deg)
    • rotate(0,1,0,30deg)=rotateY(30deg)
    • rotate(0,0,1,30deg)=rotateZ(30deg)

4.5 3D缩放

·CSS3中,3D缩放处理主要通过scalez0和scale3d(两个函数来实现。当scale3d0中X轴和Y轴同时为1,即scale3d1,1,sz),其效果等同于scaleZ(sz)。通过使用3D缩放函数,可以让元素在Z轴上按比例缩放。默认值为1,当值大于1时,元素放大,反之小于 1且大于0.01时,元素缩小。

  • scale3d0函数的使用语法如下: scale3d(sx,sy,sz)
  • 其中,各参数作用如下。
    • SX:横向缩放比例;
    • SY:纵向缩放比例:
    • SZ:Z轴缩放比例;

4.6 多重变形

不管是2D变形还是3D变形,都可以使用多重变形,它们之间使用在CSS3中,空格分隔,具体语法如下: transform: <transform-function> <transform-function>

  • 其中,transfrom-function是指CSS3中的任何变形函数。
相关推荐
轻口味21 分钟前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王1 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发1 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀1 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪2 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef3 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6414 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻4 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云4 小时前
npm淘宝镜像
前端·npm·node.js