一个CSS动画的demo

    
复制代码
  .lineBarDis {
        height: 8px;
        background-image: linear-gradient(to right, #011c72 0%, #c7ced2 100%);
        animation: myAnimation 1.5s infinite; /* 设置动画为2秒钟的时间,并无限循环 */
      }

      @keyframes myAnimation {
        0% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 0%);
        }
        10% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 10%);
        }
        20% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 20%);
        }
        30% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 30%);
        }
        40% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 40%);
        }
        50% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 50%);
        }
        60% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 60%);
        }
        70% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 70%);
        }
        80% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 80%);
        }
        90% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 90%);
        }
        100% {
          background-image: linear-gradient(to right, #011c72 0%, #c7ced2 100%);
        }
      }
复制代码

 

 

 

 

 

posted on   漫思  阅读(7)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· 面试官:你是如何进行SQL调优的?
历史上的今天:
2022-09-01 C#中流的读取器和编写器(BinaryReader与 BinaryWriter ,StreamReader 与 StreamWriter,StringReader 等)详细介绍
2022-09-01 盘点 10个 C# 开源项目 yyds!akyukaiyua
2022-09-01 穿越时间·Plus! 2001年 Microsoft Plus! for Windows XP
2022-09-01 C#程序优化的50种方案
2022-09-01 盘点阿里巴巴 15 个顶级前端开源项目
2022-09-01 C# 子线程快速终止的几个办法
2022-09-01 .NET 7 性能改进 -- 至今为止最快的.NET平台

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示