扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >CSS怎么实现大小相同、颜色深浅不一的粒子旋转加载动画
  • 458

0
分享到

CSS怎么实现大小相同、颜色深浅不一的粒子旋转加载动画

2024-04-02 19:04:59 458人浏览 薄情痞子
摘要

本篇内容介绍了“CSS怎么实现大小相同、颜色深浅不一的粒子旋转加载动画”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够

本篇内容介绍了“CSS怎么实现大小相同、颜色深浅不一的粒子旋转加载动画”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

本文利用CSS实现大小相同、颜色深浅不一的粒子旋转加载动画，供大家参考，具体内容如下。

animation属性设置的参数：
       ● 设置对象所应用的动画名称：load5。
       ● 设置对象动画的持续时间：1.1s。
       ● 设置对象动画的过渡类型：
             ease：动画以低速开始，然后加快，在结束前变慢。
             linear：匀速。
             ease-in：动画以低速开始。
             ease-out：动画以低速结束。
             ease-in-out：动画以低速开始和结束，相对于ease缓慢，速度更均匀。
             step-start：按keyframes设置逐帧显示，第一帧为keyframes设置的第一帧。
             step-end：按keyframes设置逐帧显示，第一帧为样式的初始值。
             steps(<number>[, [ start | end ] ]?)：把keyframes里设置的一帧等分为几帧，start为第一次显示第一帧，end第一次显示样式的初始值，例如：steps(4,start)。
             cubic-bezier(<number>, <number>, <number>, <number>)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。贝兹曲线限制了首尾两控制点的位置，通过调整中间两控制点的位置可以灵活得到常用的动画效果。
        ● 设置对象动画的循环次数：infinite（无限循环）。

 将动画运行整个过程的分为0%，12.5%，25%，37.5%，50%，62.5%，75%，87.5%，100%这8个阶段，在不同的阶段运用颜色的透明度制作出不同的阴影效果。

CSS怎么实现大小相同、颜色深浅不一的粒子旋转加载动画

     

CSS Code复制内容到剪贴板

  1. #load5,     

  2. #loader5 {     

  3.   margin: 80px 50px;     

  4.   float: left;     

  5.   font-size: 25px;     

  6.   width: 1em;     

  7.   height: 1em;     

  8.   border-radius: 50%;     

  9.   position: relative;     

  10.   text-indent: -9999em;     

  11.   -WEBkit-animation: load5 1.1s infinite ease;     

  12.   animation: load5 1.1s infinite ease;     

  13. }     

  14. @-webkit-keyframes load5 {     

  15.   0%,     

  16.   100% {     

  17.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 1), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),     

  18.                  2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     

  19.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),     

  20.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.5), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7);     

  21.   }     

  22.   12.5% {     

  23.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.7), 1.8em -1.8em 0 0 rgba(128, 0, 255, 1),     

  24.                  2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     

  25.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),     

  26.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.5);     

  27.   }     

  28.   25% {     

  29.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.5), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7),     

  30.                  2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     

  31.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),     

  32.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);     

  33.   }     

  34.   37.5% {     

  35.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0em rgba(128, 0, 255, 0.5),     

  36.                  2.5em 0em 0 0 rgba(128, 0, 255, 0.7), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     

  37.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),     

  38.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);     

  39.   }     

  40.   50% {     

  41.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),     

  42.                  2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.7),     

  43.                  0 2.5em 0 0 rgba(128, 0, 255, 1), -1.8em 1.8em 0 0 rgba(128, 255, 0, 0.2),     

  44.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);     

  45.   }     

  46.   62.5% {     

  47.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),     

  48.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.5),     

  49.                   0 2.5em 0 0 rgba(128, 0, 255, 0.7), -1.8em 1.8em 0 0 rgba(128, 0, 255, 1),     

  50.                   -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);     

  51.   }     

  52.   75% {     

  53.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),     

  54.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     

  55.                   0 2.5em 0 0 rgba(128, 0, 255, 0.5), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.7),     

  56.                   -2.6em 0 0 0 rgba(128, 0, 255, 1), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);     

  57.   }     

  58.   87.5% {     

  59.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),     

  60.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     

  61.                   0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.5),     

  62.                   -2.6em 0 0 0 rgba(128, 0, 255, 0.7), -1.8em -1.8em 0 0 rgba(128, 0, 255, 1);     

  63.   }     

  64. }     

  65. @keyframes load5 {     

  66.   0%,     

  67.   100% {     

  68.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 1), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),     

  69.                  2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     

  70.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),     

  71.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.5), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7);     

  72.   }     

  73.   12.5% {     

  74.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.7), 1.8em -1.8em 0 0 rgba(128, 0, 255, 1),     

  75.                  2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     

  76.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),     

  77.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.5);     

  78.   }     

  79.   25% {     

  80.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.5), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.7),     

  81.                  2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     

  82.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),     

  83.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);     

  84.   }     

  85.   37.5% {     

  86.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0em rgba(128, 0, 255, 0.5),     

  87.                  2.5em 0em 0 0 rgba(128, 0, 255, 0.7), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     

  88.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),     

  89.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);     

  90.   }     

  91.   50% {     

  92.      box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),     

  93.                  2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.7),     

  94.                  0 2.5em 0 0 rgba(128, 0, 255, 1), -1.8em 1.8em 0 0 rgba(128, 255, 0, 0.2),     

  95.                  -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);     

  96.   }     

  97.   62.5% {     

  98.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),     

  99.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.5),     

  100.                   0 2.5em 0 0 rgba(128, 0, 255, 0.7), -1.8em 1.8em 0 0 rgba(128, 0, 255, 1),     

  101.                   -2.6em 0 0 0 rgba(128, 0, 255, 0.2), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);     

  102.   }     

  103.   75% {     

  104.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),     

  105.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     

  106.                   0 2.5em 0 0 rgba(128, 0, 255, 0.5), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.7),     

  107.                   -2.6em 0 0 0 rgba(128, 0, 255, 1), -1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2);     

  108.   }     

  109.   87.5% {     

  110.       box-shadow: 0 -2.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em -1.8em 0 0 rgba(128, 0, 255, 0.2),     

  111.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     

  112.                   0 2.5em 0 0 rgba(128, 0, 255, 0.2), -1.8em 1.8em 0 0 rgba(128, 0, 255, 0.5),     

  113.                   -2.6em 0 0 0 rgba(128, 0, 255, 0.7), -1.8em -1.8em 0 0 rgba(128, 0, 255, 1);     

  114.   }     

  115. }   

“CSS怎么实现大小相同、颜色深浅不一的粒子旋转加载动画”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！

--结束END--

本文标题: CSS怎么实现大小相同、颜色深浅不一的粒子旋转加载动画

本文链接: https://lsjlt.com/news/77976.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • CSS怎么实现大小相同、颜色深浅不一的粒子旋转加载动画
    本篇内容介绍了“CSS怎么实现大小相同、颜色深浅不一的粒子旋转加载动画”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够...
    99+
    2024-04-02
  • CSS3怎么实现大小不一的粒子旋转加载动画
    这篇文章主要介绍“CSS3怎么实现大小不一的粒子旋转加载动画”，在日常操作中，相信很多人在CSS3怎么实现大小不一的粒子旋转加载动画问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解...
    99+
    2024-04-02
  • CSS怎么实现弹簧效果的旋转加载动画
    这篇文章主要讲解了“CSS怎么实现弹簧效果的旋转加载动画”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS怎么实现弹簧效果的旋转加载动画”吧！先看看效果，...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作