当前位置: article > 正文

CSS之动画

作者：AllinToyou | 2024-05-03 01:33:51

踩

CSS之动画

前言：

一个好的事物应该是有生命，而不是死板的，我们在制作网页时也是如此，为了让画面变得更加生动有趣，我们会给它加上动画的效果，例如过度、变形、旋转、放缩。

动画：

什么是动画：

动画是一种动态的效果，例如我们的GIF图也是一种动画，其实现的方式就是通过帧来实现的，我认为是多张图片的切换。

动画的基础操作：

设置关键帧：

语法：

文字解释：

（1）基本框架：

@keyframes 关键帧名称 {内容}

（2）内容：

内容当中使用from（或者0%）表示动画开始的位置，使用to（或者100%）表示结束的位置。

代码演示：

<1>
@keyframes name {
    from{
        /*开始的位置*/
    }
    to{
        /*结束的位置*/
    }
}
<2>
@keyframes name {
    0%{
        /*开始的位置*/
    }
    100%{
        /*结束的位置*/
    }
}

动画的常用属性：

可以参考此篇文章：点此跳转

属性解释属性值解释
animation-name 指定要对当前元素生效的关键帧的名字自定义名称
animation-duration 指定动画的执行时间填入运行时间（秒或毫秒）
animation-timing-function 此属性的详细解释看此处：点此跳转
animation-iteration-count 指定动画执行的次数
常数次数
infinite 指定动画应该播放无限次（永远）
animation-direction 指定动画运行的方向
normal 默认值从from向to运行每次都是这样
reverse 从 to 向 from 运行每次都是这样
alternate 从 from 向 to 运行重复执行动画时反向执行
alternate-reverse 从 to 向 from 运行重复执行动画时反向执行
animation-play-state 设置动画的执行状态
running 默认值动画执行
paused 动画暂停
animation-fill-mode 指定动画的填充模式
none 默认值动画执行完毕元素回到原来位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画延时等待时，元素就会处于开始位置
both 结合了 forwards 和 backwards

animation-delay 设置动画的延时
单位可以是秒（s）或毫秒（ms）

当为负数时，立即开始动画，但跳过前多少时间的动画

transition 可以同时设置动画相关的所有属性
如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟

动画使用方法：

使用animation【这是一个简写的用法，里面直接写入上方属性】添加动画效果，动画名称和动画时长必须赋值

代码演示：


<!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>
    <style>
        .outer{
            height: 500px;
            border-bottom: 10px black solid;
        }
        .outer  div{
            float: left;
            width: 100px;
            height: 100px;
            background-color: red;
            animation: act .1s forwards linear infinite alternate;
        }
        div.box1{
            background-color: orange;
            animation-duration: 5s;
        }
        @keyframes act{
            from{
                margin-top: 0;
            }
            to{
                margin-top: 400px;      
              }
        }     
    </style>
</head>
<body>
    <div class="outer">
        <div class="box1"></div>
    </div>
    </body>
</html>

过渡(transition)：

可以参考这篇文章：点此跳转

什么是过渡：

过度是指指定一个属性发生变化时的切换方式，其与动画类似，两者的不同之处在于过渡需要条件的激活。

常用属性：

属性

解释

属性值

transition-property

属性用来设置元素中参与过渡的属性名称

none	表示没有属性参与过渡效果
all	表示所有属性都参与过渡效果
property	定义应用过渡效果的 CSS 属性名称列表，多个属性名称之间使用逗号,进行分隔

transition-duration

用来设置过渡需要花费的时间（单位为秒或者毫秒）

transition-timing-function

属性用来设置过渡动画的类型

linear	以始终相同的速度完成整个过渡过程
ease	以慢速开始，然后变快，然后慢速结束的顺序来完成过渡过程
ease-in	以慢速开始过渡的过程
ease-out	以慢速结束过渡的过程
ease-in-out	以慢速开始，并以慢速结束的过渡效果
cubic-bezier(n, n, n, n)	使用 cubic-bezier() 函数来定义自己的值，以上几种都可以使用这个来表示，每个参数的取值范围在 0 到 1 之间

代码演示(举例)：


<!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>
      img{
         width: 100px;
         transition-property:width;
      }
         /*点击放大*/
      img:hover{
         width: 500px;
      }
   </style>
</head>
<body>
   <div>
      <img src="../img/4.jpg" alt="">
   </div>
</body>
</html>

变形（仅仅讲三维空间的）：

可以参考此篇文章：点此跳转

什么是变形：

变形是指通过css来改变元素的形状或位置，不会影响到页面的布局，百分比是相对于自身计算

常用属性：

属性	说明
transform: translateX()	沿着x轴平移（水平）
transform: translateY()	沿着Y轴平移（竖直）
transform: translateZ()	沿着Z轴平移（z轴可以理解为离使用者的远近）

代码演示：


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<style>
   div{
      perspective:800px;
   }
   .box1{
      width: 500px;
      height: 500px;
      margin: 0px auto;
      margin-top: 100px;
      background-color: lightblue;
   }
   .box2{
      width: 100px;
      height: 100px;
      margin: 0px auto;
      background-color: aquamarine;
   }
   .box2:hover{
      transform: translatez(200px);
   }
</style>
<body>
   <div class="box1">
      <div class="box2"></div>
   </div>
</body>
</html>

旋转（仅仅讲二维空间的）：

可以参考此篇文章：点击查阅

什么是旋转：

旋转使某一个物体沿着某个中心旋转相应的度数，角度为正表示顺时针旋转，负数表示逆时针旋转。

常用属性：

属性	解释
transform：rotate（角度）	围绕着中心点进行旋转
transform：rotatex（角度）	围绕着 x轴点进行旋转
transform：rotatey（角度）	围绕着y轴点进行旋转

代码演示：


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<style>
   .box1{
      width: 200px;
      height: 200px;
      margin: 0px auto;
      margin-top: 100px;
      background-color: lightblue;
   }
   .box2{
      width: 200px;
      height: 200px;
      margin: 0px auto;
      
      background-color: aquamarine;
   }
   .box2:hover{
      transform: rotate(45deg);
   }
</style>
<body>
   <div class="box1">
      <div class="box2"></div>
   </div>
</body>
</html>

放缩：

可以参考此篇文章：点击查阅

什么是放缩：

放缩是指物体在根据某个中心线等比例向两边伸长。

常用属性：

属性	说明
scalex（倍数）	沿着y的中心线向水平两侧伸长
scaley（倍数x）	沿着x的中心线向竖直两侧伸长
scale（x的倍数，y的倍数）/scale（倍数）	分别沿着x，y的中心线向两侧伸长【当只有一个倍数时水平竖直方向进行相同操作】
scalez（倍数）	沿着z轴进行伸长操作
scale3d（x的倍数，y的倍数，z的倍数）	与scale操作相同

代码演示：


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<style>
   .box1{
      width: 200px;
      height: 200px;
      margin: 0px auto;
      margin-top: 100px;
      background-color: lightblue;
   }
   .box1:hover{
      transform: scale(2,3);
   }
</style>
<body>
   <div class="box1">
      
   </div>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/527088