CSS3动画特效

最新推荐文章于 2024-04-17 01:37:33 发布

ZF_CSDN_

最新推荐文章于 2024-04-17 01:37:33 发布

阅读量149

点赞数

文章标签： css3 动画

本文链接：https://blog.csdn.net/ZF_CSDN_/article/details/119953781

版权

动画特效
1. 动画
设计师；美工；前端（实现）
动态网站（具有动画错误！）是数据是动态的。

1) 实现步骤
1. 定义动画帧
@keyframes 动画名{
from {
// 开始帧
}
to {
// 结束帧
}
}

@keyframes 动画名{
0% {
// 开始帧
}
20% {

}
...
100% {
// 结束帧
}
}
2. 设定动画（贺卡）
animation-name: move;
动画名
animation-duration: 2s;
持续时间
animation-timing-function: linear;
时间曲线函数（自由落体，贝塞尔曲线）
animation-fill-mode:forwards;
填充模式，动画结束后保留哪一帧规则
animation-iteration-count: 2;
动画迭代次数 infinite
animation-direction: alternate-reverse;
动画执行的方向 from->to , to->from
animation-play-state: paused;
动画状态
animation-delay: 1s;
延迟时间
animation: move 2s 1s 2 linear;
动画的速写形式
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>呼吸灯</title>

  <style>

    div {

      box-sizing: border-box;

    }

    .container {

      width: 300px;

      height: 500px;

      background-color: #999;

      margin: 0 auto;

    }

    .box {

      height: 300px;

      padding: 30px;

      background-color: #666;

      animation: move_outer 6s linear infinite;

    }

    .box .circle {

      height: 100%;

      border-radius: 50%;

    }

    .box > .outer {

      border: 5px solid #ccc;

      padding: 40px;

      animation: move_inner 6s linear infinite;

    }

    .box > .outer > .inner {

      border: 8px solid #f4f4f4;

    }

    @keyframes move_outer {

      20% {

        padding:20px

      }

      40% {

        padding: 30px;

      }

    }

    @keyframes move_inner {

      20% ,70%{

        padding: 50px;

      }

      40% ,100%{

        padding: 40px;

      }

    }

  </style>

</head>

<body>

  <div class="container">

    <div class="box">

      <div class="outer circle">

        <div class="inner circle"></div>

      </div>

    </div>

  </div>

</body>

</html>

2. 动画库 animate.css
动画帧、动画设定规则都有第三方完成，我们直接使用class即可
1) 引入动画库
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.css">
2) 使用
1. 直接调用动画设定类
<div class="box animate__animated animate__infinite animate__bounce"></div>
2. 引用关键帧
<style>
.bounce {
animation: flash 10s linear infinite;
}
</style>
<div class="box bounce"></div>
3. 过渡
过渡是轻量级的动画，过渡中无需定义关键帧，它解决的问题是当属性改变的时候实行缓缓改变。一般通过伪类来触发。过渡一定发生在属性值改变上（状态发生变化的时候）
transition-property: width;
过渡属性，取值可以为多个，多个值通过逗号分割；关键字：all 所有属性
transition-duration: 2s;
过渡持续时间
transition-delay: 0;
过渡延迟时间
transition-timing-function: linear;
时间曲线函数
transition:transform,background-color 2s,2s 0s linear;
速写形式
4. 变形
transform:变形函数
1. 缩放
scale(2)
2. 平移
translate(100px,50px)
3. 旋转
rotate(360deg)
4. 拉伸
skew(45deg)

ZF_CSDN_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画特效

动画特效 1. 动画设计师；美工；前端（实现）动态网站（具有动画错误！）是数据是动态的。 1) 实现步骤 1. 定义动画帧 @keyframes 动画名{ from { // 开始帧 } to { // 结束帧 } } ...
复制链接

扫一扫