CSS圆形加载动画

最新推荐文章于 2024-05-10 10:01:58 发布
最新推荐文章于 2024-05-10 10:01:58 发布
阅读量372 收藏
点赞数 2
文章标签： html css animation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43548659/article/details/110955782
版权

CSS圆形加载动画

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
	background-color: #0099FF;
}
.test{
	width: 180px;
	height: 180px;
	border: solid 10px rgba(255,255,255,0);
	border-radius: 200px;
	position: absolute;
	top: 50%;
	margin-top: -100px;
	left: 50%;
	margin-left: -100px;
	animation: clip 5s linear infinite;
}
.test::before{
	content: '';
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 200px;
	border: solid 10px rgba(255,255,255,0);
	border-top-color: rgba(255,255,255,1) !important;
	border-left-color: rgba(255,255,255,1) !important;
	left: -10px;
	top: -10px;
	transform: rotate(-45deg);
	animation: before 5s linear infinite;
}
.test::after{
	content: '';
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 200px;
	border: solid 10px rgba(255,255,255,0);
	border-top-color: rgba(255,255,255,1) !important;
	border-left-color: rgba(255,255,255,1) !important;
	left: -10px;
	top: -10px;
	transform: rotate(-45deg);
	animation: after 5s linear infinite;
}
@keyframes clip{
	0% {clip: rect(0,200px,200px,100px);}
	100% {clip: auto;}
}
@keyframes before{
	0% {transform: rotate(-45deg);}
	50% {transform: rotate(135deg);}
	100% {transform: rotate(135deg);}
}
@keyframes after{
	0% {transform: rotate(-45deg);}
	50% {transform: rotate(135deg);}
	100% {transform: rotate(315deg);}
}
</style>
</head>
<body>
	<div class="test"></div>
</body>
</html>

效果如下
在这里插入图片描述

ShiChiYa
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3彩色圆形亮点加载特效
06-24
CSS3彩色圆形亮点加载特效是一款纯CSS3绘制的彩色酷炫霓虹灯圆环圆点加载动画特效。
CSS实现横向粒子变动加载动画
09-24
在这个例子中，我们将深入探讨如何使用CSS来创建一个横向粒子变动加载动画。这个动画通常用于网站加载时提供视觉反馈，让用户知道页面正在加载内容。 首先，我们关注CSS3中的`animation`属性，它允许我们定义一个...
手把手实现 CSS 加载动画（一）
p1967914901的博客
08-07 4423
接下来便是旋转这三个圆，最方便的做法便是将容器进行旋转，但有一个地方需要注意，我们是要等三个圆移动到最远的位置后开始旋转。既然是加载动画，我们不可能让他在角落展示吧，我们当然需要将它水平垂直居中，水平垂直居中的方式有很多，这里就不再赘述了。现在你已经看到了三个黑乎乎的圆已经重合在容器中间（为了方便观察，我们给容器加了一个背景颜色）。好了，到现在我们已经完成了初始状态，接下来我们要为它们分别定义动画。接下来我们来绘制三个圆，首先一开始三个圆是在容器中间。，这就是动画开始时一个圆分裂成三个圆的停顿时刻；...
纯css 加载动画
weixin_54255895的博客
03-20 494
【代码】纯css 加载动画。
Loaders.css：纯CSS加载动画的神奇世界
最新发布
gitblog_00029的博客
05-10 473
Loaders.css：纯CSS加载动画的神奇世界 项目地址:https://gitcode.com/ConnorAtherton/loaders.css 项目介绍 在网页开发中，等待是最让人不耐烦的体验之一。而Loaders.css为你的网站带来了一种全新的方式，将这种等待转化为视觉上的享受——一系列性能优化的纯CSS加载动画。这个库由Connor Atherton创建，提供了多种独特的动画效果...
css加载动画
weixin_64729620的博客
11-03 312
* reverse 动画反向播放 */
一组舒服好看的css加载动画（复制就能用）
Wancc123的博客
03-23 1864
搬运几种好用的css加载动画，没有gif动画，大家手动cv一下看看，记得点赞收藏， 文章最后附上例子地址 第一种：方块翻滚 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> --> <meta name="viewp
css加载动画大全
nyasm的博客
02-08 1万+
css加载动画大全 <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS3 Loader &amp; Spinners</title> <!-- <link rel="stylesheet" href="./style.css"> --> </head> <body> &.
纯CSS实现预加载动画效果
09-27
本篇文章将介绍如何仅使用CSS实现预加载动画效果，无需依赖JavaScript或者其他复杂的编程语言。 首先，我们创建一个id为`loading`的div元素，作为预加载动画的容器。这个元素被设置为绝对定位，覆盖整个屏幕，并...
纯css3 loading线性圆形加载动画特效源码.zip
11-20
纯css3 loading线性圆形加载动画特效源码.zip
html5加载动画效果,用纯CSS实现加载中动画效果
weixin_35838019的博客
06-04 408
今天要介绍的是用简单的CSS——只用CSS，不用Gif——制作“加载中…”动画效果。先看看效果：上面的这个加载中效果，以前是用gif动图实现的，但随着CSS的进步，CSS动画功能越来越强大，我们只用一小片段HTML和CSS就能实现，方便了很多，体积也减小了很多。再加上一些CSS：.pswp__preloader__icn {opacity:0.75;width: 24px;height: 24px...
让我们来完成一些纯CSS优美的加载动效，下一篇持续更新中...
爱蹦跶的全栈大A阿
12-25 1512
CSS动画是网页中添加趣味性的重要方式之一。过渡动效不仅可以提高用户的体验,也可以增强页面的美观度。一个优雅的加载动画,能为等待页面加载的用户带来更好的体验。本文将介绍几种常见的CSS加载动效的实现方法。加载动效主要应用于两个场景:页面加载时的加载动画,以及Ajax请求时的加载提示。这两种场景下,加载动画可以消除用户的等待焦虑,让页面跳转和内容更新更流畅自然。
肝了两宿才收集的17个超炫酷的 CSS 动画加载与进度条特效，绝对值得收藏！！！
热门推荐
Amo Xiang的博客
06-23 1万+
文章目录一、圆形加载动画二、上下跳动的圆球加载动画三、3D立体加载动画四、饼图加载动画五、多色圆点波动效果的加载动画六、制作顺时针放大的圆圈加载动画七、制作小圆圈轮流放大的加载动画八、制作竖条加载动画九、制作水波扩散效果加载动画十、制作逆时针逐渐放大多点加载动画十一、制作形状变化的加载动画十二、实现动态前进的阴影进度条十三、椭圆形进度条加载十四、彩色进度条加载效果十五、环形加载动画十六、制作斑马线样式的进度条十七、程序加载页面 一、圆形加载动画 1、实例描述：浏览网页时，难免会有网页加载慢的情况，当网页长时
css 圆形背景icon_巧用css圆角实现有点意思的加载动画
weixin_30043179的博客
12-29 348
css的border属性和border-radius属性 笔者在前面的文章中也分享过了如何利用border来实现不同的形状, 比如三角形, 如下为原理图: 利用这个原理我们只要把元素的border-radius 设置为圆形(比如50%), 我们是不是就能实现一个饼图了呢? 我们来看看效果: 以上是设置一个边的border-color的样子和设置四个边的border-color的样子, 所以说实...
纯CSS实现圆环渐变过渡加载动画
HeMister的博客
04-09 2321
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=...
html css 加载动画效果
qq_42525953的博客
08-06 212
html css 加载动画效果 话不多说直接看效果 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s
css 加载动画如何生效,css3 动画加载效果
weixin_29359515的博客
08-04 145
来看看效果：css代码：body,html,*{padding:0px;margin:0px;}body,html{width:100%;background-color:#FFF;}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}#loader{height...
[CSS]用CSS animation实现圆圈向外扩展的动画效果
change66的博客
07-21 2901
圆圈实现向外扩展的动画效果，代码如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <script type="text/javascript" src="http://code.jquery.com/
用css动画画一个不规则的渐变动态圆
桎梏的博客
09-12 958
用css动画画一个不规则的渐变动态圆
css圆形loading加载动画
08-25
你可以使用CSS来创建圆形的loading加载动画。下面是一个示例代码： HTML: ```html <div class="loader"></div> ``` CSS: ```css .loader { border: 4px solid #f3f3f3; /* 设置边框样式和颜色 */ border-top: 4...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值