八种炫酷纯CSS加载动画代码

已于 2023-05-05 16:34:53 修改
阅读量7k 收藏 40
点赞数 3
分类专栏： css样式 css动画 文章标签： css 动画 css3
于 2022-05-12 18:43:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43923808/article/details/124737305
版权

加载1

CSS源码

.title{
    width: 100%;
    text-align: center;
    margin:60px 0;
    font-size: 18px;
    color: #999;
}
.loadingOne{
    width: 80px;
    height: 40px;
    margin: 0 auto;
}
.loadingOne span{
    display: inline-block;
    width: 8px;
    height: 100%;
    border-radius: 4px;
    background: lightgreen;
    -webkit-animation: load 1s ease infinite;
    animation: load 1s ease infinite;
}
@-webkit-keyframes load{
    0%,100%{
        height: 40px;
        background: lightgreen;
    }
    50%{
        height: 70px;
        margin: -15px 0;
        background: lightblue;
    }
}
.loadingOne span:nth-child(2){
    -webkit-animation-delay:0.2s;
    animation-delay:0.2s;
}
.loadingOne span:nth-child(3){
    -webkit-animation-delay:0.4s;
    animation-delay:0.4s;
}
.loadingOne span:nth-child(4){
    -webkit-animation-delay:0.6s;
    animation-delay:0.6s;
}
.loadingOne span:nth-child(5){
    -webkit-animation-delay:0.8s;
    animation-delay:0.8s;
}

HTML源码

<div class="loadingOne">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

加载2

css源码

.loadingTwo{
    width: 150px;
    height: 4px;
    border-radius: 2px;
    margin: 0 auto;
    margin-top:100px;
    position: relative;
    background: lightgreen;
    -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
    animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loadingTwo span{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    margin-top: -7px;
    margin-left:-8px;
    -webkit-animation: changePosition 1.04s ease-in infinite alternate;
    animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
    0%{
        background: lightgreen;
    }
    100%{
        background: lightblue;
    }
}
@-webkit-keyframes changePosition{
    0%{
        background: lightgreen;
    }
    100%{
        margin-left: 142px;
        background: lightblue;
    }
}

HTML源码

<div class="loadingTwo">
    <span></span>
</div>
程序猿的生活：8个有用的 CSS 技巧:视差图像，sticky footer 等等4 赞同 · 0 评论文章

加载3


css源码

.loadingThree{
    width: 150px;
    height: 15px;
    margin: 0 auto;
    margin-top:100px;
}
.loadingThree span{
    display: inline-block;
    width: 15px;
    height: 100%;
    margin-right: 5px;
    border-radius: 50%;
    background: lightgreen;
    -webkit-animation: load 1.04s ease infinite;
}
.loadingThree span:last-child{
    margin-right: 0px;
}
@-webkit-keyframes load{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
.loadingThree span:nth-child(1){
    -webkit-animation-delay:0.13s;
}
.loadingThree span:nth-child(2){
    -webkit-animation-delay:0.26s;
}
.loadingThree span:nth-child(3){
    -webkit-animation-delay:0.39s;
}
.loadingThree span:nth-child(4){
    -webkit-animation-delay:0.52s;
}
.loadingThree span:nth-child(5){
    -webkit-animation-delay:0.65s;
}

HTML源码

<div class="loadingThree">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

加载4


css源码

.loadingFour{
        width: 150px;
        height: 15px;
        margin: 0 auto;
        margin-top:100px;
        text-align: center;
    }
    .loadingFour span{
        display: inline-block;
        width: 15px;
        height: 100%;
        margin-right: 5px;
        background: lightgreen;
        -webkit-animation: load 1.04s ease infinite;
    }
    .loadingFour span:last-child{
        margin-right: 0px;
    }
    @-webkit-keyframes load{
        0%{
            opacity: 1;
        }
        100%{
            opacity: 0;
        }
    }
    .loadingFour span:nth-child(1){
        -webkit-animation-delay:0.13s;
    }
    .loadingFour span:nth-child(2){
        -webkit-animation-delay:0.26s;
    }
    .loadingFour span:nth-child(3){
        -webkit-animation-delay:0.39s;
    }
    .loadingFour span:nth-child(4){
        -webkit-animation-delay:0.52s;
    }
    .loadingFour span:nth-child(5){
        -webkit-animation-delay:0.65s;
    }.loadingTwo{
    width: 150px;
    height: 4px;
    border-radius: 2px;
    margin: 0 auto;
    margin-top:100px;
    position: relative;
    background: lightgreen;
    -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
    animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loadingTwo span{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    margin-top: -7px;
    margin-left:-8px;
    -webkit-animation: changePosition 1.04s ease-in infinite alternate;
    animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
    0%{
        background: lightgreen;
    }
    100%{
        background: lightblue;
    }
}
@-webkit-keyframes changePosition{
    0%{
        background: lightgreen;
    }
    100%{
        margin-left: 142px;
        background: lightblue;
    }
}

html源码

<div class="loadingFour">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
​

加载5

css源码

.loadingFive{
    width: 150px;
    height: 15px;
    margin: 0 auto;
    margin-top:100px;
}
.loadingFive span{
    display: inline-block;
    width: 15px;
    height: 100%;
    margin-right: 5px;
    background: lightgreen;
    -webkit-transform-origin: right bottom;
    -webkit-animation: load 1s ease infinite;
}
.loadingFive span:last-child{
    margin-right: 0px;
}
@-webkit-keyframes load{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        -webkit-transform: rotate(90deg);
    }
}
.loadingFive span:nth-child(1){
    -webkit-animation-delay:0.13s;
}
.loadingFive span:nth-child(2){
    -webkit-animation-delay:0.26s;
}
.loadingFive span:nth-child(3){
    -webkit-animation-delay:0.39s;
}
.loadingFive span:nth-child(4){
    -webkit-animation-delay:0.52s;
}
.loadingFive span:nth-child(5){
    -webkit-animation-delay:0.65s;
}.loadingTwo{
    width: 150px;
    height: 4px;
    border-radius: 2px;
    margin: 0 auto;
    margin-top:100px;
    position: relative;
    background: lightgreen;
    -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
    animation: changeBgColor 1.04s ease-in infinite alternate;
}
.loadingTwo span{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    margin-top: -7px;
    margin-left:-8px;
    -webkit-animation: changePosition 1.04s ease-in infinite alternate;
    animation: changePosition 1.04s ease-in infinite alternate;
}
@-webkit-keyframes changeBgColor{
    0%{
        background: lightgreen;
    }
    100%{
        background: lightblue;
    }
}
@-webkit-keyframes changePosition{
    0%{
        background: lightgreen;
    }
    100%{
        margin-left: 142px;
        background: lightblue;
    }
}.loadingFive{
    width: 150px;
    height: 15px;
    margin: 0 auto;
    margin-top:100px;
}
.loadingFive span{
    display: inline-block;
    width: 15px;
    height: 100%;
    margin-right: 5px;
    background: lightgreen;
    -webkit-transform-origin: right bottom;
    -webkit-animation: load 1s ease infinite;
}
.loadingFive span:last-child{
    margin-right: 0px;
}
@-webkit-keyframes load{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        -webkit-transform: rotate(90deg);
    }
}
.loadingFive span:nth-child(1){
    -webkit-animation-delay:0.13s;
}
.loadingFive span:nth-child(2){
    -webkit-animation-delay:0.26s;
}
.loadingFive span:nth-child(3){
    -webkit-animation-delay:0.39s;
}
.loadingFive span:nth-child(4){
    -webkit-animation-delay:0.52s;
}
.loadingFive span:nth-child(5){
    -webkit-animation-delay:0.65s;
}

html源码

<div class="loadingFive"> 
   <span></span>
   <span></span>
   <span></span>
   <span></span>
   <span></span>
</div>

加载6

css源码

.loadingSix{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    margin-top:100px;
}
.loadingSix span{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    -webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0.2;
    }
}
.loadingSix span:nth-child(1){
    left: 0;
    top: 50%;
    margin-top:-8px;
    -webkit-animation-delay:0.13s;
}
.loadingSix span:nth-child(2){
    left: 14px;
    top: 14px;
    -webkit-animation-delay:0.26s;
}
.loadingSix span:nth-child(3){
    left: 50%;
    top: 0;
    margin-left: -8px;
    -webkit-animation-delay:0.39s;
}
.loadingSix span:nth-child(4){
    top: 14px;
    right:14px;
    -webkit-animation-delay:0.52s;
}
.loadingSix span:nth-child(5){
    right: 0;
    top: 50%;
    margin-top:-8px;
    -webkit-animation-delay:0.65s;
}
.loadingSix span:nth-child(6){
    right: 14px;
    bottom:14px;
    -webkit-animation-delay:0.78s;
}
.loadingSix span:nth-child(7){
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    -webkit-animation-delay:0.91s;
}
.loadingSix span:nth-child(8){
    bottom: 14px;
    left: 14px;
    -webkit-animation-delay:1.04s;
}

加载7

css源码

.loadingSeven{
    width: 80px;
    height: 40px;
    margin: 0 auto;
    margin-top:100px;
}
.loadingSeven span{
    display: inline-block;
    width: 8px;
    height: 100%;
    border-radius: 4px;
    background: lightgreen;
    -webkit-animation: loadsaven 1.04s ease infinite;
}
@-webkit-keyframes loadsaven{
    0%,100%{
        height: 40px;
        background: lightgreen;
    }
    50%{
        height: 60px;
        margin-top: -20px;
        background: lightblue;
    }
}
.loadingSeven span:nth-child(2){
    -webkit-animation-delay:0.13s;
}
.loadingSeven span:nth-child(3){
    -webkit-animation-delay:0.26s;
}
.loadingSeven span:nth-child(4){
    -webkit-animation-delay:0.39s;
}
.loadingSeven span:nth-child(5){
    -webkit-animation-delay:0.52s;
}

HTML源码

<div class="loadingSeven">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

加载8

css源码

.loadingEight{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto;
    margin-top:100px;
    position: relative;
    border:5px solid lightgreen;
    -webkit-animation: turn 2s linear infinite;
}
.loadingEight span{
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: lightgreen;
    position: absolute;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    -webkit-animation: changeBgColor 2s linear infinite;
}
@-webkit-keyframes changeBgColor{
    0%{
        background: lightgreen;
    }
    100%{
        background: lightblue;
    }
}
@-webkit-keyframes turn{
    0%{
        -webkit-transform: rotate(0deg);
        border-color: lightgreen;
    }
    100%{
        -webkit-transform: rotate(360deg);
        border-color: lightblue;
    }
}

html源码

<div class="loadingEight"> 
   <span></span>
</div>

大大。
关注
  • 3
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
28种CSS3炫酷loading页面加载动画特效代码，兼容主流浏览器
05-24
28种CSS3炫酷loading页面加载动画特效代码，兼容主流浏览器
28个炫酷的纯CSS特效动画示例（含源代码）
热门推荐
大剑师兰特的GIS世界
01-15 1万+
CSS是网页的三驾马车之一，是对页面布局的总管家，2024年了，这里列出28个超级炫酷的CSS动画示例，让您的网站更加炫目多彩。
HTML和CSS代码实现带动态繁星背景特效
weixin_42234082的博客
03-15 387
这段代码会在页面背景生成很多闪烁的星星，给你的个人网页带来动态繁星背景特效。你可以将自己的个人信息、项目等内容添加到。标签内，使网页更加完整。如果需要更多的样式调整或功能扩展，可以进一步修改代码。
【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）
赏樱看雪撸代码
07-11 1万+
CSS3实现多种load加载效果，纯CSS3实现多种加载中效果，纯CSS3实现28种加载动态效果，页面实现loading效果，好看的loading动态特效，animation与transform的灵活应用。
CSS3动画效果源代码27个合集.zip
09-02
软件介绍: 一共27个各式各样的CSS3动画效果源代码，内容如下：纯CSS3模拟风车转动效果纯css3云彩动画效果纯css3制作出来的狐狸尾巴燃烧效果纯CSS3模拟跳动的音乐音符效果多种css3滚动下拉动画加载效果css3颗粒全屏动画效果懒人原生纯CSS3鼠标悬停抖动效果css3点击动画效果css3模拟雷达波向外散发动画效果纯css3实现鼠标移入div图片后按钮飞入动画效果一个简单好看的纯CSS3翻书效果纯css3网页左上角扇形状导航效果适合图片列表排列(文字说明较多)的CSS3动画效果28个纯css3 加载loading动画特效轻量级CSS3立体式3D旋转动画效果简单易用的纯CSS3图片墙效果css3高度灵活的模拟扑克牌切换图片效果又一款纯CSS3立体式3D鼠标悬停效果又一款简单漂亮的CSS3图片悬停遮罩效果多款炫酷鼠标悬停图文动画效果css3放大镜动画效果纯CSS3制作飞舞的火箭动画多个CSS3实现的动画效果不错的星级评分效果纯HTML5 CSS3实现一棵自己跳舞的树纯CSS3模拟摩天轮旋转动画效果
css动画效果（关键帧）
comegoing_xin_lv的博客
09-01 2323
基本动画效果，基本参数和属性
css3的一些动画（代码及演示）
qq_43955202的博客
03-31 4839
CSS3 的一些动画（代码及演示） 1. 过渡： Transition(实现元素不同状态间的平滑过渡） 补间动画：从初始状态到终了状态。 帧动画：按固定顺序和速度播放。 属性： Transition-property：all； 所有属性均过渡 Transition-duration：1s； 设置过渡时间 Transition-timing-function:linear;设置运动曲线 （...
css加载动画
weixin_41897680的博客
09-25 7789
前言 感觉css动画真的很有意思，奈何太菜，想不出来。下面的这些例子都是从网上找的，我自己手敲的。教程来源也会进行标注。 加载动画 动画1 教程：点此查看 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
使用CSS3动画做了四个小案例
weixin_64965154的博客
05-14 1337
box-shadow: none | inset（可选值，不设置，为外投影，设置，为内投影） x-offset（阴影水平偏移量，正方向为right） y-offset（阴影垂直偏移量，正方向为bottom） blur-然后我们可以来设置她的高可以使用vh，(是指可视窗口的高度。3. Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，正值，阴影在对象的底部，负值时，阴影在对象的顶部。2.X-offset:是指阴影水平偏移量,其值可正可负，正值，则阴影在对象的右边，负值，阴影在对象的左边。
手把手实现 CSS 加载动画（一）
p1967914901的博客
08-07 4362
接下来便是旋转这三个圆，最方便的做法便是将容器进行旋转，但有一个地方需要注意，我们是要等三个圆移动到最远的位置后开始旋转。既然是加载动画，我们不可能让他在角落展示吧，我们当然需要将它水平垂直居中，水平垂直居中的方式有很多，这里就不再赘述了。现在你已经看到了三个黑乎乎的圆已经重合在容器中间（为了方便观察，我们给容器加了一个背景颜色）。好了，到现在我们已经完成了初始状态，接下来我们要为它们分别定义动画。接下来我们来绘制三个圆，首先一开始三个圆是在容器中间。，这就是动画开始时一个圆分裂成三个圆的停顿时刻；...
css3炫酷页面加载动画特效特效代码
03-20
CSS33实现150个动画SVG图标是一款基于jQuery+CSS3实现的SVG图标动画代码。
炫酷纯CSS3预加载动画特效源码 3种.zip
11-10
炫酷纯CSS3预加载动画特效源码 3种.zip 炫酷纯CSS3预加载动画特效源码 3种.zip 炫酷纯CSS3预加载动画特效源码 3种.zip
28种CSS3炫酷loading页面加载动画
12-11
28种CSS3炫酷loading页面加载动画特效代码，兼容主流浏览器 使用方法： 1、在head区域引入样式表文件demo.css和loaders.css 2、在你的网页中加入<!-- 代码 开始 --><!-- 代码 结束 -->注释区域代码即可...
28种CSS3炫酷loading页面加载动画特效代码
11-30
28种CSS3炫酷loading页面加载动画特效代码，兼容主流浏览器 使用方法： 1、在head区域引入样式表文件demo.css和loaders.css 2、在你的网页中加入<!-- 代码 开始 --><!-- 代码 结束 -->注释区域代码即可 3、末尾调用...
PostCSS概述
活到老学到老
04-18 252
PostCSS是一个用于转换CSS的工具。它采用插件机制，通过运行各种插件来处理CSS，并生成转换后的CSS文件。PostCSS具有强大的扩展性和灵活性，可以根据需要选择使用不同的插件。PostCSS可以用于各种不同的任务，如自动添加浏览器前缀、压缩CSS、提取CSS中的关键信息等。它还支持使用JavaScript编写自定义插件，以实现更高级的转换。PostCSS是一个非常强大的工具，它在前端开发中被广泛应用。它可以大大提高CSS代码的开发效率和维护性，并支持使用最新的CSS特性和语法。
探索PostCSS：打造定制化、前瞻性的现代CSS开发工作流
艾恩小灰灰的博客
04-19 487
PostCSS是一种用JavaScript编写的CSS处理器，它通过解析、转换和输出CSS代码来增强和优化CSS开发流程。不同于传统的预处理器（如Sass、Less），PostCSS并不引入新的语法，而是专注于在CSS标准的基础上进行扩展和优化。它的强大之处在于其丰富的插件生态系统，允许开发者根据项目需求定制CSS处理流程。PostCSS凭借其插件化架构、对未来CSS特性的支持以及出色的集成能力，已成为现代CSS开发不可或缺的工具。
css设置文字撑满盒子
半兽先生的博客
04-12 280
【代码】css设置文字撑满盒子。
CSS基础：table的4个标签的样式详解（6000字长文！附案例）
最新发布
u013179804的博客
04-19 520
之前在 HTML 基础部分，我们讲解了表格的结构和写法。简单回顾下。包含等表格部分。和分别包含多个行。行中可以包含或单元格，用来显示表格的标题或数据。本文，我们来给它们增加一些漂亮的样式。图为增加样式前，增加样式后的效果，是不是确实漂亮多了。ok，那我们一起来看看这些表格标签的样式属性吧。
CSS @media 媒体查询全解：打造极致跨平台页面的动态户体体验
JINGWHALE
04-19 346
随着互联网设备的多样化和用户浏览习惯的变化，现代网页设计越来越注重提供跨平台、跨设备的无缝用户体验。CSS媒体查询@media在此背景下扮演着至关重要的角色，它赋予网页设计者精准控制网页样式的能力，使之能随设备环境变化而动态调整，从而打造出高度适应性和互动性的页面体验。本文将深入探讨如何运用@media媒体查询来创造流畅且响应迅速的动态页面。
炫酷的css特效
05-24
以下是几个炫酷的CSS特效示例： 1. 3D按钮效果： ```css .button { display: inline-block; padding: 10px 20px; color: #fff; background-color: #1abc9c; border: none; border-radius: 5px; position: relative; overflow: hidden; transition: all 0.3s ease-in-out; } .button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.2); transform: perspective(500px) rotateY(90deg) translateZ(-10px); transition: all 0.3s ease-in-out; } .button:hover { background-color: #16a085; } .button:hover::before { left: 0; transform: perspective(500px) rotateY(0deg) translateZ(0); } ``` 2. 悬浮效果： ```css .container { position: relative; width: 300px; height: 200px; perspective: 800px; } .card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotateY(0deg); width: 100%; height: 100%; background-color: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); transition: all 0.3s ease-in-out; } .card:hover { transform: translate(-50%, -50%) rotateY(180deg); } .card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1); z-index: 1; } .card::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to bottom right, #3498db, #1abc9c); z-index: -1; transform: rotateY(180deg); } ``` 3. 模糊背景效果： ```css .container { position: relative; width: 100%; height: 100%; } .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("path/to/image.jpg"); background-size: cover; filter: blur(10px); z-index: -1; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: rgba(255, 255, 255, 0.8); border-radius: 5px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值