css动画实现进度条

最新推荐文章于 2024-08-02 16:11:15 发布
最新推荐文章于 2024-08-02 16:11:15 发布
阅读量1.7k 收藏
点赞数
分类专栏： css html 文章标签： css 动画 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fred8/article/details/121822220
版权
html 同时被 2 个专栏收录
3 篇文章 1 订阅
订阅专栏
css
2 篇文章 0 订阅
订阅专栏

负责代码看效果

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .image1up {
            position: absolute;
            border-radius: 10px;
            top: 8px;
            left: 8px;
            width: 100px;
            height: 20px;
            background: red;
            animation: myfirst 3s infinite;
            animation-iteration-count: infinite;
            transition-timing-function: linear;
            -moz-animation: myfirst 3s infinite;
            /* Firefox */
            -webkit-animation: myfirst 3s infinite;
            /* Safari and Chrome */
            -o-animation: myfirst 3s infinite;
            /* Opera */
        }

        .image1bac {
            border-radius: 10px;
            width: 100px;
            height: 20px;
            background: brown;
        }

        @keyframes myfirst {
            0% {
                width: 20px;
            }

            100% {
                width: 100px;
            }
        }

        @-moz-keyframes myfirst

        /* Firefox */
            {
            0% {
                width: 20px;
            }

            100% {
                width: 100px;
            }
        }

        @-webkit-keyframes myfirst

        /* Safari and Chrome */
            {
            0% {
                width: 20px;
            }

            100% {
                width: 100px;
            }
        }

        @-o-keyframes myfirst

        /* Opera */
            {
            0% {
                width: 20px;
            }

            100% {
                width: 100px;
            }
        }
    </style>
</head>

<body>

    <div class="image1up"></div>
    <div class="image1bac"></div>
</body>

</html>
知知洋洋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css 横向进度条和竖向进度条实现代码
11-21
下面我们将详细讲解如何使用CSS实现这两种进度条。 一、横向进度条 横向进度条通常在水平方向上展示进度，它由一个包含进度指示器的容器和填充部分组成。以下是一个简单的例子： ```html <!DOCTYPE html> 横向...
CSS3实现多彩进度条动画特效代码
03-20
在本文中，我们将深入探讨如何使用CSS3来创建一个多彩且具有动画效果的进度条，以实现类似Flash的视觉效果。CSS3（层叠样式表第三版）是Web设计领域的一项重要技术，它提供了丰富的样式控制，包括选择器增强、多列...
【CSS笔记】loading动效
吾昂王
09-03 304
loading动效。
前端实现 海浪(波浪)进度条效果(支持自定义长度；调节速度,2s缓冲结束)
weixin_46022934的博客
06-27 483
实现海浪进度条 效果图如下(投入使用的版本) 背景和过程 一、调试和探索过程(下面都会给出来对应代码) 二、类似Element-plus的进度条样式 1. CSS的样式如下 2. HTML结构如下 二、电涌效果的进度条如下 1. CSS的样式如下 2. HTML的结构如下: 3. JavaScript代码如下 三、波浪效果的进度条 1. CSS的结构如下: 2. HTML的结构如下: 四、海浪效果的进度条(等我空闲就上传代码!!!!) 总结
css 前端实现通过css动画实现进度条动态加载效果
工作中遇到问题记录
01-15 1644
css 前端实现通过css动画实现进度条动态加载效果
css实现波浪进度条动画
qq_41756580的博客
09-18 1036
效果图 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <style> *{ margin: 0; padding: 0; box-sizing: border-box; .
CSS实现圆环进度条
热门推荐
时光清浅处，一步一安然
07-18 1万+
该例子是写的固定的进度，你们也可以根据自己的需求变换。首先，我们先看一个静态进度条。其实和静态的是一样的。
CSS实现动态进度条
weixin_43923808的博客
08-15 1422
目标动态进度条
css实现圆形进度条
老实敲代码，佛只渡有缘人
10-26 1282
3）大于50%，right为180deg，left对应：100%是0deg，75%对应-90deg，以此为例，那么计算规律是，75% - 50% = 25%，25 * 3.6 = 90，因为left是逆时针计算，所以需要用180 - 90 = 90，再添加一个符号即可（数学上直接减180结果一样），就是-90deg。1）当百分比小于50%且不为0的时候，左边不需要百分比：为-180度，右边180度是50%，计算出1%是多少度：180 / 50% = 3.6度（度/1%），乘以百分比即可；
css进度条动态显示,CSS3实现进度条动画
weixin_29840475的博客
08-03 968
CSS语言：CSSSCSS确定.cube {position: absolute;left: 0;top: 0;right: 0;bottom: 0;width: 500px;height: 250px;margin: auto;background: #EDEFF5;box-shadow: 1px 1px 5px #B9C0D8;border-radius: 2px;font-family: '...
CSS 斜条纹进度条动画
m0_64491262的博客
06-20 988
CSS 进度条动画样式
vue使用CSS3实现进度条加载效果
weixin_43996368的博客
06-10 432
<div class="animation progressAnimation"></div> //进度条 .animation { position: absolute; top: 0; left: 0; background-image: linear-gradient(to right, #ffffff01, #ffffff90); height: 8px; border-radius: 4px; opacity: 0.7; } .progres
纯css3渐变进度条动画特效
07-24
在本案例中，我们关注的是一个使用纯CSS3实现的渐变进度条动画特效。这个特效利用了CSS3的背景属性和动画特性，为网页界面增添了动态视觉效果，提升了用户体验。 首先，我们要理解"渐变效果"在CSS3中的实现。CSS3...
CSS3斑马线进度条动画特效
12-13
总结来说，CSS3斑马线进度条动画特效是通过巧妙地结合Bootstrap的进度条样式、CSS3的动画和选择器来实现的。这个特效不仅提升了用户体验，也展示了CSS3在网页设计中的强大潜力。理解和掌握这些知识点，对于提升网页...
css3动画进度条
07-06
本教程将深入探讨如何使用纯CSS3来创建一个动画进度条。 首先，我们需要了解HTML结构，进度条的基本元素通常是一个`<div>`标签，我们可以为它添加`progress-bar`类以便于后续的CSS选择器定位。例如： ```html ...
CSS学习 01 利用鼠标悬停制造文本隐藏效果
weixin_57266891的博客
08-02 289
以下HTML代码包含三个帖子，每个帖子都有一个剧透部分。：文本颜色恢复为初始值（通常是默认颜色）。：表示文档的根元素。定义了一个CSS变量。：背景色恢复为初始值（无背景色）。：设置行高为1.5倍的字高。：所有样式变化在0.5秒内以。（黑色），导致文本不可见。：文本颜色使用同一个变量。这些剧透部分被包含在。：背景色使用定义的变量。：当鼠标悬停在类名为。
CSS：图片间空白间距问题的解决方案
q1003675852的博客
08-02 343
本文主要记录CSS：图片间空白间距问题的解决方案，特别是针对iphone 14 pro设备的新情况进行测试处理。
项目中万能使用tailwindcss，无版本冲突、报错
最新发布
xxx
08-02 87
新建两个css文件tailwindInput.css、tailwindOutput.css。
css实现圆形进度条动态
09-29
要实现一个圆形进度条的动态效果，可以使用CSS中的@keyframes动画和transform属性。 首先，创建一个包含圆形进度条的div元素，并设定其宽高和边框样式，使它呈现为圆形。 然后，使用CSS的@keyframes创建一个动画序列，在序列中设置进度条的旋转角度。例如，可以从0°开始旋转，到360°结束，表示进度条的完整程度。 接下来，在CSS中，为进度条的div元素添加animation属性，将刚才创建的动画序列应用于进度条上，并设定动画的持续时间、重复次数等。 最后，通过设置transform-origin属性，将进度条的旋转中心设置为圆心，使得进度条动画在圆形元素中心点进行旋转，形成动态效果。 例如，下面是一个实现50%进度的圆形进度条的CSS代码示例： ```css .circle { width: 100px; height: 100px; border: 5px solid #ccc; border-radius: 50%; animation: progress 2s linear infinite; transform-origin: center center; } @keyframes progress { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } ``` 这个示例中，圆形进度条的宽高为100px，边框为5px粗的灰色线条。动画序列progress中，进度条从0°开始旋转到180°，持续2秒，线性变化，并无限循环播放。进度条的旋转中心被设置为圆心。 这样，通过CSS实现了一个圆形进度条的动态效果。可以根据需要修改代码中的数值，实现不同的进度和动画效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

知知洋洋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值