【css动画】- 直播中的动画效果

最新推荐文章于 2024-05-15 18:00:00 发布

元元猿

最新推荐文章于 2024-05-15 18:00:00 发布

阅读量252

点赞数 1

分类专栏：前端 CSS 文章标签： css 前端动画

本文链接：https://blog.csdn.net/qq_55050872/article/details/133951492

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

效果图（左侧三条柱条有动画效果）

完整代码及详解

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css - 动画 - 直播中</title>
    <style>
        .container {
            display: flex;
            align-items: center;
        }

        /* 三个柱条的父级容器样式 */
        .live-animation-box {
            display: flex;
            align-items: flex-end;
            gap: 2px;
            height: 14px;
            width: 16px;
        }

        /* 左侧柱条样式 */
        .left {
            width: 3px;
            height: 6px;
            background-color: #46c37b;
            border-radius: 2px;
            /* 绑定创建的动画名称 规定动画以1s为一个周期 动画变化速度匀速 动画播放无限次 */
            animation: left-animation 1s linear infinite;
        }

        /* 中间柱条样式 */
        .center {
            width: 3px;
            height: 9px;
            background-color: #46c37b;
            border-radius: 2px;
            animation: center-animation 1s linear infinite;
        }

        /* 右侧柱条样式 */
        .right {
            width: 3px;
            height: 3px;
            background-color: #46c37b;
            border-radius: 2px;
            animation: right-animation 1s linear infinite;
        }

        /* 左侧柱条动画规则 */
        @keyframes left-animation {
          0%{height: 6px;}
          25%{height: 9px;}
          50%{height: 6px;}
          75%{height: 3px;}
          100%{height: 6px;}
        }

        /* 中间柱条动画规则 */
        @keyframes center-animation {
          0%{height: 9px;}
          25%{height: 6px;}
          50%{height: 3px;}
          75%{height: 6px;}
          100%{height: 9px;}
        }

        /* 右侧柱条动画规则 */
        @keyframes right-animation {
          0%{height: 3px;}
          25%{height: 6px;}
          50%{height: 9px;}
          75%{height: 6px;}
          100%{height: 3px;}
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="live-animation-box">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <span>直播中</span>
    </div>
</body>

</html>

CSS3 动画详解

首先创建css3动画之前需要先了解 @keyframes 规则

CSS3 @keyframes 规则

@keyframes 规则用于创建动画；

@keyframes 规则内指定一个CSS样式和动画将逐步从目前样式更改为新的样式；

@keyframes 规则用百分比或 "from"（等同于 0% 是动画的开始）和 "to（等同于 100% 是动画的结束）",

如下例中：

animation-name：@keyframes 动画的名称；当动画开始时高度为6px，然后当动画为25%时高度改变为9px，当动画为50%时高度改变为3px，当动画完成时高度为0。

@keyframes animation-name
{
  0% {height: 6px;}
  25% {height: 9px}
  50% {height: 6px}
  75% {height: 3px}
  100% {height: 0px}
}

CSS3 动画属性

在 @keyframes 创建的动画，需要把它绑定到一个选择器，否则动画不会生效。

指定至少规定动画的名称和规定动画的时长这两个CSS3的动画属性绑定向一个选择器。

动画属性如下：

animation: 所有动画属性的简写属性。写法如下：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-name: 规定 @keyframes 动画的名称。

animation-duration: 规定动画完成一个周期所花费的时间（秒或毫秒）。默认是0。

animation-timing-function: 规定动画的速度曲线。

默认是"ease"：动画以低速开始，然后加快，在结束前变慢；

"ease-in"：动画以低速开始；

"ease-out"：动画以低速结束；

"ease-in-out"：动画以低速开始和结束；

"linear"：动画从头到尾的速度相同；

cubic-bezier(n,n,n,n)：通过 cubic-bezier 函数来定义速度曲线；

steps(int, start | end)：指定时间函数中的间隔数量（步长），

参数一 int（正整数）：指定函数的间隔数，

参数二（可选）：表示动画是从时间段的开头连续还是末尾连续，

start：表示直接开始｜end（默认值）：表示戛然而止。

animation-delay: 规定动画何时开始。

默认是0：直接开始；

可以是负值：例 -3s是使动画马上开始，但跳过3s进入动画。

animation-iteration-count: 规定动画被播放的次数。

默认是1：动画只播放一次；

n：一个数字，定义动画应该播放多少次；

infinite：指定动画应该播放无限次。

animation-direction: 指定是否应该轮流反向播放动画。

animation-fill-mode: 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。

animation-play-state: 指定动画是否正在运行或已暂停。

initial: 设置属性为其默认值。

inherit: 从父元素继承属性。

元元猿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【css动画】- 直播中的动画效果

当动画开始时高度为6px，然后当动画为25%时高度改变为9px，当动画为50%时高度改变为3px，当动画完成时高度为0。@keyframes 规则用百分比或 "from"（等同于 0% 是动画的开始）和 "to（等同于 100% 是动画的结束）",指定至少规定动画的名称和规定动画的时长这两个CSS3的动画属性绑定向一个选择器。在 @keyframes 创建的动画，需要把它绑定到一个选择器，否则动画不会生效。规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
复制链接

扫一扫