div+css实现圆形loading动画，渐变拖尾动画

先来上个效果图：

思路：

使用渐变背景色来实现渐变拖尾，再使用两个圆形div来实现圆弧，拖尾最前端的圆形是用的一个圆形定位到固定位置实现的。

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>border渐变</title><style>*{box-sizing: border-box;}.container{width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}.loading{width: 100px;height: 100px;border-radius: 50%;position: relative;overflow: hidden;padding: 10px;}.loading .loading-content{width: 100%;height: 100%;background-color: #ffffff;position: relative;z-index: 9;border-radius: 50%;}.loading .loading-border{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;border: 10px solid #f0f1f6;border-radius: 50%;}.loading .loading-mask{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 2;animation: rotateAnimate 2s linear infinite;-moz-animation: rotateAnimate 2s linear infinite;   /* Firefox */-webkit-animation: rotateAnimate 2s linear infinite;   /* Safari 和 Chrome */-o-animation: rotateAnimate 2s linear infinite;    /* Opera */}.loading .loading-mask::before{content: "";display: block;position: absolute;bottom: 0;left: calc(50% - 5px);width: 10px;height: 10px;border-radius: 50%;background-color: #6c8de5;}.loading .loading-mask::after{content: "";display: block;position: absolute;bottom: 0;left: 50%;width: 50%;height: 60%;background-image: linear-gradient(45deg, #6c8de5, #f0f1f6);}@keyframes rotateAnimate{from {transform: rotate(0);-moz-transform: rotate(0);-webkit-transform: rotate(0);-o-transform: rotate(0);}to {transform: rotate(360deg);-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);}}@-moz-keyframes rotateAnimate /* Firefox */{from {transform: rotate(0);-moz-transform: rotate(0);-webkit-transform: rotate(0);-o-transform: rotate(0);}to {transform: rotate(360deg);-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);}}@-webkit-keyframes rotateAnimate /* Safari 和 Chrome */{from {transform: rotate(0);-moz-transform: rotate(0);-webkit-transform: rotate(0);-o-transform: rotate(0);}to {transform: rotate(360deg);-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);}}@-o-keyframes rotateAnimate /* Opera */{from {transform: rotate(0);-moz-transform: rotate(0);-webkit-transform: rotate(0);-o-transform: rotate(0);}to {transform: rotate(360deg);-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);}}</style>
</head>
<body><div class="container"><div class="loading"><div class="loading-mask"></div><div class="loading-border"></div><div class="loading-content"></div></div></div>
</body>
</html>

div+css实现圆形loading动画，渐变拖尾动画相关推荐

CSS(二)——Flex布局边框渐变过渡动画
学习CSS第二周的总结一. Flex布局容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位置(与边框的交叉点)叫做main start,结束位 ...
CSS学习--DIY Loading动画
首先要知道什么是CSS3动画?然后才能做出自己想要的动画效果.下面会通过3个简单的Loading动画效果来对CSS3 animation动画做一个简单介绍,希望对你有用. 动画是使元素从一种样式逐渐变 ...
css椭圆圆形边框_使用CSS在弧形，圆形和椭圆形中制作动画元素
css椭圆圆形边框 Web animation is most often created between two points: from and to a state, or between po ...
DIV+CSS布局心得
DIV+CSS布局心得文章目录 DIV+CSS布局心得 1,清空所有原有样式随时对HTML和CSS进行注释 2,分析页面布局 DIV+CSS布局页面页面常用HTML标签 CSS常用选择器 CSS ...
任性 CSS 实现 Donut loading
HTML 只需要一个 div 即可 CSS 规定 div 的宽高,并指定默认边框宽度通过 border-radius: 50% 将 div 设置为圆形单独修改左边框颜色 border-left-c ...
div 设置 hover时边框颜色_CSS 奇思妙想边框动画
border 属性谈到边框,首先会想到 border,我们最常用的莫过于 solid,dashed,上图中便出现了 dashed. 除了最常见的 solid,dashed,CSS border 还支 ...
login.php静态页面的设计,ps+div+css打造蓝色后台--login页面设计
ps+p+css打造蓝色后台做到兼容主流浏览器如何设计一个页面? 如何切片才能更好的配合实现? 如何考虑兼容性? 如何用p+css做后台的百分比布局? Login页面设计先在photoshop中 ...
html5 圆形加载进度条,纯css3超酷圆形Loading加载进度条特效
这是一款效果炫酷的纯css3圆形Loading加载进度条特效插件.该loading特效使用:before和:after伪元素来制作动画d的不同部分,然后给他们设置absolute定位和CSS tran ...
css实现波浪球效果图,用css实现圆形波浪效果图
在移动端经常看到一些圆形波浪图来显示金额,刚开始我认为这种效果只能用canvas写的,后来发现用css也可以. 原理:我们都知道让块元素的border-radius:50%会变成圆形,如果少于50%呢 ...
用css动态实现圆环百分比分配——初探css3动画
最近的小程序项目有个设计图要求做一个圆环,两种颜色分配,分别代表可用金额和冻结金额.要是就直接这么显示,感觉好像挺没水平??于是我决定做个动态! 在mdn把新特性gradients(渐变).trans ...

div+css实现圆形loading动画，渐变拖尾动画

div+css实现圆形loading动画，渐变拖尾动画相关推荐

最新文章

热门文章