开发者社区 开发与运维 文章 正文

6种css预载动画效果demo效果示例（整理）

2023-09-15 142
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 6种css预载动画效果demo效果示例（整理） 
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>css预载动画效果</title>
    <style>
      /*第一种开始*/
      #preloader-1 {
        position: relative;
      }
      #preloader-1 span {
        position: absolute;
        border: 8px solid #fff;
        border-top: 8px solid transparent;
      border-radius: 999px;
      }
      #preloader-1 span:nth-child(1) {
        width: 80px;
        height: 80px;
        animation: spin-1 2s infinite linear;
      }
      #preloader-1 span:nth-child(2) {
        top: 20px;
        left: 20px;
        width: 40px;
        height: 40px;
        animation: spin-2 1s infinite linear;
      }
      @keyframes spin-1 {
        0% {
          transform: rotate(360deg);
          opacity: 1.0;
        }
        50% {
          transform: rotate(180deg);
          opacity: 0.5;
        }
        100% {
          transform: rotate(0deg);
          opacity: 0;
        }
      }
      @keyframes spin-2 {
        0% {
          transform: rotate(0deg);
          opacity: 0.5;
        }
        50% {
          transform: rotate(180deg);
          opacity: 1;
        }
        100% {
          transform: rotate(360deg);
          opacity: 0.5;
        }
      }
      /*第一种结束*/
      /*第二种开始*/
      #preloader-2 {
        position: relative;
        margin-left: 200px;
      }
      #preloader-2 span {
        position: absolute;
        width: 30px;
      height: 30px;
        background: #fff;
        border-radius: 999px;
      }
      #preloader-2 span:nth-child(1) {
        animation: cross-1 1.5s infinite linear;
      }
      #preloader-2 span:nth-child(2) {
        animation: cross-2 1.5s infinite linear;
      }
      @keyframes cross-1 {
        0% {
          transform: translateX(0);
          opacity: 0.5;
        }
        50% {
          transform: translateX(80px);
          opacity: 1;
        }
        100% {
          transform: translateX(0);
          opacity: 0.5;
        }
      }
      @keyframes cross-2 {
        0% {
          transform: translateX(80px);
          opacity: 0.5;
        }
        50% {
          transform: translateX(0);
          opacity: 1;
        }
        100% {
          transform: translateX(80px);
          opacity: 0.5;
        }
      }
      /*第二种结束*/
      /*第三种开始*/
      #preloader-3 {
        position: relative;
       width: 80px;
        height: 80px;
        border: 4px solid rgba(255, 255, 255, .25);
        border-radius: 999px;
        margin-left: 400px;
      }
      #preloader-3 span {
        position: absolute;
       width: 80px;
        height: 80px;
        border: 4px solid transparent;
        border-top: 4px solid #8BC34A;
        border-radius: 999px;
        top: -4px;
        left: -4px;
        animation: rotate 1s infinite linear;
      }
      @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      /*第三种结束*/
      /*第四重开始*/
      #preloader-4 {
        position: relative;
        margin-left: 600px;
      }
      #preloader-4 span {
        position: absolute;
        width: 16px;
        height: 16px;
        border-radius: 999px;
        background: #00bc12;
      animation: bounce 1s infinite linear;
      }
      #preloader-4 span:nth-child(1) {
        left: 0;
        animation-delay: 0s;
      }
      #preloader-4 span:nth-child(2) {
        left: 20px;
        animation-delay: 0.25s;
      }
      #preloader-4 span:nth-child(3) {
        left: 40px;
        animation-delay: 0.5s;
      }
      #preloader-4 span:nth-child(4) {
        left: 60px;
        animation-delay: 0.75s;
      }
      #preloader-4 span:nth-child(5) {
        left: 80px;
        animation-delay: 1.0s;
      }
      @keyframes bounce {
        0% {
          transform: translateY(0px);
          opacity: 0.5;
        }
        50% {
          transform: translateY(-30px);
          opacity: 1.0;
        }
        100% {
          transform: translateY(0px);
          opacity: 0.5;
        }
      }
      /*第四种结束*/
      /*第五种开始*/
      #preloader-5 {
        position: relative;
        margin-left: 800px;
      }
      #preloader-5 span {
        position: absolute;
        width: 50px;
        height: 50px;
        border: 5px solid #00bc12;
        border-radius: 999px;
        opacity: 0;
        animation: radar 2s infinite linear;
      }
      #preloader-5 span:nth-child(1) {
        animation-delay: 0s;
      }
      #preloader-5 span:nth-child(2) {
        animation-delay: 0.66s;
      }
      #preloader-5 span:nth-child(3) {
        animation-delay: 1.33s;
      }
      @keyframes radar {
        0% {
          transform: scale(0);
          opacity: 0;
        }
        25% {
          transform: scale(0);
          opacity: 0.5;
        }
        50% {
          transform: scale(1);
          opacity: 1.0;
        }
        75% {
          transform: scale(1.5);
          opacity: 0.5;
        }
        100% {
          transform: scale(2);
          opacity: 0;
        }
      }
      /*第五种结束*/
    </style>
  </head>
  <body style="background: #ffb83c;">
    <div id="preloader-1">
      <span></span>
      <span></span>
    </div>
    <div id="preloader-2">
      <span></span>
      <span></span>
    </div>
    <div id="preloader-3">
      <span></span>
    </div>
    <div id="preloader-4">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div id="preloader-5">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>n帧动画</title>
    <style type="text/css">
      body {
        background: #000;
      }
      .load {
        font-size: 33px;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        position: relative;
        text-indent: -8888em;
        /*box-shadow: 3em 2em 0 1.5em #FFF,6em 2em 0 0 #FFF,9em 2em 0 -0.01em #FFF;*/
        /*background: #8C0044;*/
        animation: load-effect 0.99s infinite linear;
      }
      @keyframes load-effect {
        0% {
          box-shadow: 3em 2em 0 1em #fff, 6em 2em 0 0.5em #fff, 9em 2em 0 0 #fff, 12em 2em 0 -0.5em #fff;
        }
        25% {
          box-shadow: 3em 2em 0 0.5em #fff, 6em 2em 0 0 #fff, 9em 2em 0 -0.5em #fff, 12em 2em 0 1em #fff;
        }
        50% {
          box-shadow: 3em 2em 0 0 #fff, 6em 2em 0 -0.5em #fff, 9em 2em 0 1em #fff, 12em 2em 0 0.5em #fff;
        }
        75% {
          box-shadow: 3em 2em 0 -0.5em #fff, 6em 2em 0 1em #fff, 9em 2em 0 0.5em #fff, 12em 2em 0 0 #fff;
        }
        100% {
          box-shadow: 3em 2em 0 1em #fff, 6em 2em 0 0.5em #fff, 9em 2em 0 0 #fff, 12em 2em 0 -0.5em #fff;
        }
      }
    </style>
  </head>
  <body>
    <div class="load"></div>
  </body>
</html>

文章标签：
前端开发
关键词：
CSS动画
CSS demo
CSS动画demo
CSS示例
CSS动画效果
兜里只有三分钱~
目录
相关文章
派大鑫的工作室
|
2月前
|
机器学习/深度学习 前端开发 JavaScript
CSS动画知识点
CSS动画知识点
派大鑫的工作室
81 2
疯狂的猿
|
1月前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
疯狂的猿
58 31
光明顶阳顶天
|
2月前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解，并采取适当的策略和方法。通过不断的实践和优化，你可以在各种浏览器上创造出流畅、美观且兼容的动画效果，为用户带来更好的体验。在实际开发中，要密切关注浏览器的发展动态，及时掌握最新的兼容性技巧和解决方案，以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
光明顶阳顶天
116 58
疯狂的猿
|
18天前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果，呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现，没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
疯狂的猿
33 6
众所周知
|
28天前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画，这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动，增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析，旨在为设计师和开发者提供实用指导。
众所周知
57 7
疯狂的猿
|
1月前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码，具有真实的视觉感，同时文字还会在旋转过程中显示出灯光的反射效果，很有意思，欢迎对此段代码感兴趣的朋友前来下载使用。
疯狂的猿
31 6
john散漫
|
1月前
|
移动开发 前端开发 JavaScript
除了 CSS3，还有哪些技术可以实现动画效果？
除了 CSS3，还有哪些技术可以实现动画效果？
john散漫
58 5
疯狂的猿
|
1月前
纯css3加载loading发光变色动画代码
纯css3加载loading发光变色动画特效代码是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画
疯狂的猿
25 2
疯狂的猿
|
1月前
|
Web App开发 前端开发 iOS开发
CSS加载动画大全 126种
CSS加载动画大全是一个css Loaders加载动画特效汇总，一共包含126种加载动画效果，不同样式不同图案，简单实用，一览包含所有，会让你在等待的过程中，体验视觉盛宴，给用户不一般的加载体验，欢迎下载试试！代码适用浏览器：搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗，是一款不错的的特效插件，希望大家喜欢！
疯狂的猿
28 2
我是快乐的嘟嘟
|
1月前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响，如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中，需要根据具体情况选择合适的动画技术。
我是快乐的嘟嘟
27 1

热门文章

最新文章

  • 1
    CSS 居中方法总结
  • 2
    CSS3的新属性的一下总结
  • 3
    19个基于 HTML5 和 CSS3 开发的优秀应用程序
  • 4
    Tailwind 生成的 CSS文件竟然有 3.7 Mb 这么巨大！这还能用？
  • 5
    一款非常棒的纯CSS3 3D菜单演示及制作教程
  • 6
    IE6, IE7, IE8 CSS 兼容速查表
  • 7
    css学习2
  • 8
    CSS-选择器7-属性
  • 9
    css属性之transition
  • 10
    asp.net 多个css文件内容自动放到一个文件中
  • 1
    css结构伪类
    66
  • 2
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    92
  • 3
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    59
  • 4
    HTML5/CSS3粒子效果进度条代码
    72
  • 5
    同样都是将物理设备虚拟化，思科的VSS和华为的CSS到底有啥区别？
    141
  • 6
    CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
    59
  • 7
    CSS外边距重叠：原理、结果
    55
  • 8
    css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
    67
  • 9
    CSS常见用法 以及JS基础语法
    70
  • 10
    css设置内嵌样式阴影
    77

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • HTML5 新特性教程
  • Node.js 入门教程文档
  • HTML 入门与实战

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 23-Vue.js在前端...1506518547.pdf
  • 《零基础HTML入门教程》

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • CSS基础教程
    • 下一篇
    DataWorks售前咨询