http://cssload.net/----动画

最新推荐文章于 2023-07-11 08:40:41 发布
最新推荐文章于 2023-07-11 08:40:41 发布
阅读量484 收藏
点赞数
分类专栏： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012260672/article/details/50238275
版权 
<div class="cssload-dots">
    <div class="cssload-dot"></div>
    <div class="cssload-dot"></div>
    <div class="cssload-dot"></div>
    <div class="cssload-dot"></div>
    <div class="cssload-dot"></div>
</div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="goo">
            <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="12" ></feGaussianBlur>
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0    0 1 0 0 0   0 0 1 0 0   0 0 0 18 -7" result="goo" ></feColorMatrix>
            <!--<feBlend in2="goo" in="SourceGraphic" result="mix" ></feBlend>-->
        </filter>
    </defs>
</svg>
.cssload-dots {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    outline: 1px solid red;
    filter: url(#goo);
        -o-filter: url(#goo);
        -ms-filter: url(#goo);
        -webkit-filter: url(#goo);
        -moz-filter: url(#goo);
}

.cssload-dot {
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
}
.cssload-dot:before {
    content: "";
    width: 34px;
    height: 34px;
    border-radius: 49px;
    background: rgb(251,211,1);
    position: absolute;
    left: 50%;
    transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
    margin-left: -17.5px;
    margin-top: -17.5px;
}



.cssload-dot:nth-child(5):before {
    z-index: 100;
    width: 44.5px;
    height: 44.5px;
    margin-left: -21.75px;
    margin-top: -21.75px;
    animation: cssload-dot-colors 4.6s ease infinite;
        -o-animation: cssload-dot-colors 4.6s ease infinite;
        -ms-animation: cssload-dot-colors 4.6s ease infinite;
        -webkit-animation: cssload-dot-colors 4.6s ease infinite;
        -moz-animation: cssload-dot-colors 4.6s ease infinite;
}


.cssload-dot:nth-child(1) {
    animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
        -o-animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
        -ms-animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
        -webkit-animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
        -moz-animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
}
.cssload-dot:nth-child(1):before {
    background-color: rgb(255,50,112);
    animation: cssload-dot-move 4.6s 0s ease infinite;
        -o-animation: cssload-dot-move 4.6s 0s ease infinite;
        -ms-animation: cssload-dot-move 4.6s 0s ease infinite;
        -webkit-animation: cssload-dot-move 4.6s 0s ease infinite;
        -moz-animation: cssload-dot-move 4.6s 0s ease infinite;
}

.cssload-dot:nth-child(2) {
    animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
        -o-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
        -ms-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
        -webkit-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
        -moz-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
}
.cssload-dot:nth-child(2):before {
    background-color: rgb(32,139,241);
    animation: cssload-dot-move 4.6s 1.15s ease infinite;
        -o-animation: cssload-dot-move 4.6s 1.15s ease infinite;
        -ms-animation: cssload-dot-move 4.6s 1.15s ease infinite;
        -webkit-animation: cssload-dot-move 4.6s 1.15s ease infinite;
        -moz-animation: cssload-dot-move 4.6s 1.15s ease infinite;
}

.cssload-dot:nth-child(3) {
    animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
        -o-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
        -ms-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
        -webkit-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
        -moz-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
}
.cssload-dot:nth-child(3):before {
    background-color: rgb(175,225,2);
    animation: cssload-dot-move 4.6s 2.3s ease infinite;
        -o-animation: cssload-dot-move 4.6s 2.3s ease infinite;
        -ms-animation: cssload-dot-move 4.6s 2.3s ease infinite;
        -webkit-animation: cssload-dot-move 4.6s 2.3s ease infinite;
        -moz-animation: cssload-dot-move 4.6s 2.3s ease infinite;
}

.cssload-dot:nth-child(4) {
    animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
        -o-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
        -ms-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
        -webkit-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
        -moz-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
}
.cssload-dot:nth-child(4):before {
    background-color: rgb(251,211,1);
    animation: cssload-dot-move 4.6s 3.45s ease infinite;
        -o-animation: cssload-dot-move 4.6s 3.45s ease infinite;
        -ms-animation: cssload-dot-move 4.6s 3.45s ease infinite;
        -webkit-animation: cssload-dot-move 4.6s 3.45s ease infinite;
        -moz-animation: cssload-dot-move 4.6s 3.45s ease infinite;
}

@keyframes cssload-dot-move {
    0% {
        transform: translateY(0);
    }
    18%, 22% {
        transform: translateY(-68px);
    }
    40%, 100% {
        transform: translateY(0);
    }
}

@-o-keyframes cssload-dot-move {
    0% {
        -o-transform: translateY(0);
    }
    18%, 22% {
        -o-transform: translateY(-68px);
    }
    40%, 100% {
        -o-transform: translateY(0);
    }
}

@-ms-keyframes cssload-dot-move {
    0% {
        -ms-transform: translateY(0);
    }
    18%, 22% {
        -ms-transform: translateY(-68px);
    }
    40%, 100% {
        -ms-transform: translateY(0);
    }
}

@-webkit-keyframes cssload-dot-move {
    0% {
        -webkit-transform: translateY(0);
    }
    18%, 22% {
        -webkit-transform: translateY(-68px);
    }
    40%, 100% {
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes cssload-dot-move {
    0% {
        -moz-transform: translateY(0);
    }
    18%, 22% {
        -moz-transform: translateY(-68px);
    }
    40%, 100% {
        -moz-transform: translateY(0);
    }
}

@keyframes cssload-dot-colors {
    0% {
        background-color: rgb(251,211,1);
    }
    25% {
        background-color: rgb(255,50,112);
    }
    50% {
        background-color: rgb(32,139,241);
    }
    75% {
        background-color: rgb(175,225,2);
    }
    100% {
        background-color: rgb(251,211,1);
    }
}

@-o-keyframes cssload-dot-colors {
    0% {
        background-color: rgb(251,211,1);
    }
    25% {
        background-color: rgb(255,50,112);
    }
    50% {
        background-color: rgb(32,139,241);
    }
    75% {
        background-color: rgb(175,225,2);
    }
    100% {
        background-color: rgb(251,211,1);
    }
}

@-ms-keyframes cssload-dot-colors {
    0% {
        background-color: rgb(251,211,1);
    }
    25% {
        background-color: rgb(255,50,112);
    }
    50% {
        background-color: rgb(32,139,241);
    }
    75% {
        background-color: rgb(175,225,2);
    }
    100% {
        background-color: rgb(251,211,1);
    }
}

@-webkit-keyframes cssload-dot-colors {
    0% {
        background-color: rgb(251,211,1);
    }
    25% {
        background-color: rgb(255,50,112);
    }
    50% {
        background-color: rgb(32,139,241);
    }
    75% {
        background-color: rgb(175,225,2);
    }
    100% {
        background-color: rgb(251,211,1);
    }
}

@-moz-keyframes cssload-dot-colors {
    0% {
        background-color: rgb(251,211,1);
    }
    25% {
        background-color: rgb(255,50,112);
    }
    50% {
        background-color: rgb(32,139,241);
    }
    75% {
        background-color: rgb(175,225,2);
    }
    100% {
        background-color: rgb(251,211,1);
    }
}

@keyframes cssload-dot-rotate-1 {
    0% {
        transform: rotate(-105deg);
    }
    100% {
        transform: rotate(270deg);
    }
}

@-o-keyframes cssload-dot-rotate-1 {
    0% {
        -o-transform: rotate(-105deg);
    }
    100% {
        -o-transform: rotate(270deg);
    }
}

@-ms-keyframes cssload-dot-rotate-1 {
    0% {
        -ms-transform: rotate(-105deg);
    }
    100% {
        -ms-transform: rotate(270deg);
    }
}

@-webkit-keyframes cssload-dot-rotate-1 {
    0% {
        -webkit-transform: rotate(-105deg);
    }
    100% {
        -webkit-transform: rotate(270deg);
    }
}

@-moz-keyframes cssload-dot-rotate-1 {
    0% {
        -moz-transform: rotate(-105deg);
    }
    100% {
        -moz-transform: rotate(270deg);
    }
}

@keyframes cssload-dot-rotate-2 {
    0% {
        transform: rotate(165deg);
    }
    100% {
        transform: rotate(540deg);
    }
}

@-o-keyframes cssload-dot-rotate-2 {
    0% {
        -o-transform: rotate(165deg);
    }
    100% {
        -o-transform: rotate(540deg);
    }
}

@-ms-keyframes cssload-dot-rotate-2 {
    0% {
        -ms-transform: rotate(165deg);
    }
    100% {
        -ms-transform: rotate(540deg);
    }
}

@-webkit-keyframes cssload-dot-rotate-2 {
    0% {
        -webkit-transform: rotate(165deg);
    }
    100% {
        -webkit-transform: rotate(540deg);
    }
}

@-moz-keyframes cssload-dot-rotate-2 {
    0% {
        -moz-transform: rotate(165deg);
    }
    100% {
        -moz-transform: rotate(540deg);
    }
}

@keyframes cssload-dot-rotate-3 {
    0% {
        transform: rotate(435deg);
    }
    100% {
        transform: rotate(810deg);
    }
}

@-o-keyframes cssload-dot-rotate-3 {
    0% {
        -o-transform: rotate(435deg);
    }
    100% {
        -o-transform: rotate(810deg);
    }
}

@-ms-keyframes cssload-dot-rotate-3 {
    0% {
        -ms-transform: rotate(435deg);
    }
    100% {
        -ms-transform: rotate(810deg);
    }
}

@-webkit-keyframes cssload-dot-rotate-3 {
    0% {
        -webkit-transform: rotate(435deg);
    }
    100% {
        -webkit-transform: rotate(810deg);
    }
}

@-moz-keyframes cssload-dot-rotate-3 {
    0% {
        -moz-transform: rotate(435deg);
    }
    100% {
        -moz-transform: rotate(810deg);
    }
}

@keyframes cssload-dot-rotate-4 {
    0% {
        transform: rotate(705deg);
    }
    100% {
        transform: rotate(1080deg);
    }
}

@-o-keyframes cssload-dot-rotate-4 {
    0% {
        -o-transform: rotate(705deg);
    }
    100% {
        -o-transform: rotate(1080deg);
    }
}

@-ms-keyframes cssload-dot-rotate-4 {
    0% {
        -ms-transform: rotate(705deg);
    }
    100% {
        -ms-transform: rotate(1080deg);
    }
}

@-webkit-keyframes cssload-dot-rotate-4 {
    0% {
        -webkit-transform: rotate(705deg);
    }
    100% {
        -webkit-transform: rotate(1080deg);
    }
}

@-moz-keyframes cssload-dot-rotate-4 {
    0% {
        -moz-transform: rotate(705deg);
    }
    100% {
        -moz-transform: rotate(1080deg);
    }
}
诸葛苍穹
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用CSS3 实现loading动画
dengzhengguang的博客
07-03 835
用transform和animation实现的页面loading动画
jQuery-3.3.1-API-Docs-CN jQuery离线文档
11-16
3. **事件处理**：jQuery的事件处理函数如`$(selector).click(function(){...})`用于响应点击事件，`$(document).ready()`确保在页面加载完成后执行代码，`$(window).load(function(){...})`则等待所有资源加载完毕...
css loader.net,css-loader
weixin_29799175的博客
08-04 214
css-loader安装npm install --save-dev css-loader用法css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们。引用资源的合适 loader 是 file-loader和 url-loader，你应该在配置中指定(查看如下设置)。file.jsimport css...
css loader.net,css-loader style-loader原理探究
weixin_39759060的博客
08-04 240
前言我们知道，webpack默认只能解析js代码，要想解析其他类型的文件需要用到loader。比如要打包使用css文件就需要用到css-loader，style-loader，这里我们一起研究下这两个loader的作用。准备工作main.cssbody{margin:0 auto;padding:0 20px;max-width:800px;background:#f4f8fb;}webpack....
css loader.net,在vue-cli中使用css-loader实现css module
weixin_32256355的博客
08-04 315
【前言】无论是vue还是react的css模块化解决方案都是依赖loader来实现的在使用上，vue中用scoped属性实现样式的私有化，利用深度作用选择器/deep来实现样式的去私有化。例子：div>// some code.demo {height: 100px;padding-top: 20px;background-color: grey;/deep/.child {color: r...
javascript/js 原生动态引入外部css文件及动态插入css代码片段
热门推荐
小河流水
08-01 14万+
动态创建css样式有两种方式：1.引入外部css文件 2.插入css代码片段 动态插入css外部文件的方法：function loadStyle(url){ var link = document.createElement('link'); link.type = 'text/css'; link.rel = 'stylesheet'; link.href = ur
http://c.biancheng.net/
mingo_敏
07-11 138
http://c.biancheng.net/view/2343.html 标题是：C++ static_cast、dynamic_cast、const_cast和reinterpret_cast（四种类型转换运算符）http://c.biancheng.net/view/410.html 标题是：C++强制类型转换运算符（static_cast、reinterpret_cast、const_cast和dynamic_cast）
jquery图片分类无刷新加载-图片按选项卡筛选插件
最新发布
02-11
<script src="https://cdn.jsdelivr.net/npm/jquery_lazyload@1.9.7/jquery.lazy.min.js"></script> ``` ```javascript $(function() { $('img.lazy').lazy({ threshold: 0, // 图片距离顶部的距离，达到这个距离...
令人敬畏的纺纱厂：:dizzy:精选的令人眼花web乱的网络纺纱厂
01-31
目录仅CSS 丹尼尔·卡多佐（Daniel Cardoso）的《 Load Awesome》（）（） Tobias Ahlin的SpinKit（）（） CSS Load.net（） 微调（） 单杠（） 三维（） 动画文字（） 杂项-有些真的很棒！ （） CSS Only加载程序...
ASP.NET-[其他类别]无限级树形菜单(Sql数据库).zip
11-20
ASP.NET是一种基于.NET Framework的服务器端编程模型，用于构建功能丰富的、交互式的Web应用程序。在这个特定的案例中，我们关注的是如何在ASP.NET环境中实现一个无限级树形菜单，这个菜单的数据存储在Sql数据库中。...
ASP.NET 3.5 开发大全11-15
02-12
4.6.3 页面载入事件（Page_Load） 4.6.4 页面卸载事件（Page_Unload） 4.6.5 页面指令 4.7 ASP.NET网站文件类型 4.8 小结 第二篇 ASP.NET窗体控件 第5章 Web窗体的基本控件 5.1 控件的属性 5.2 简单控件 5.2.1 标签...
css创建一个表单在页面上_如何使用CSS创建易于打印的页面
culi3182的博客
09-03 617
css创建一个表单在页面上This article was updated in 2020 to reflect latest best practices in CSS print styling. 本文在2020年进行了更新，以反映CSS打印样式的最新最佳实践。 In this article, we review the art of creating printer-friendly ...
css3左右箭头
诸葛苍穹
11-06 4692
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div{*/ /*width: 20px;*/ /*height: 20px;*/ /*border-top: 1px solid #f90;*/ /*bor
css3效果
诸葛苍穹
12-22 503
效果一：360°旋转 修改rotate(旋转度数)* { transition:All 0.4s ease-in-out; -webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out; -o-transition:All 0.4s ease-in-out; } *:hove
css3-loading
诸葛苍穹
12-22 477
.loading { width: 60px; height: 60px; background-color: #FE4B83; margin: 100px auto; -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinit
加载
诸葛苍穹
12-09 441
#fountainTextG{ width:234px; margin:auto; }.fountainTextG{ color:rgb(0,0,0); font-family:Arial; font-size:24px; text-decoration:none; font-weight:normal; font-style:norm
鼠标进出效果
诸葛苍穹
01-27 425
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0;padding: 0;} body{font-size: 14px;font-family: "microsoft
CSS3 基础知识
诸葛苍穹
12-13 367
1.边框 1.1 圆角 border-radius:5px 0 0 5px; 1.2 阴影 box-shadow:2px 3px 4px 5px rgba(0,0,0,0.5);(水平、垂直、模糊、扩展) box-shadow:inset 1px 2px 3px 4px #fff;(inset 内阴影) 1.3 边框图像 border-image
编程学习资源大放送：涵盖jQuery、Java、.Net、C/C++等
同时，`.load()`, `.get()`, `.post()`等方法为常见HTTP请求提供了更方便的接口。 6. **插件生态**：jQuery拥有庞大的插件生态系统，开发者可以通过这些插件扩展功能，比如表单验证、轮播图、日期选择器等。 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值