CSS彩条加载动画效果

最新推荐文章于 2022-09-30 20:32:32 发布
最新推荐文章于 2022-09-30 20:32:32 发布
阅读量342 收藏
点赞数
文章标签： css3 css html animation 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39668938/article/details/105977975
版权

CSS彩条加载动画效果

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			body{
				margin: 0;
			    padding: 0;
				background: #f1f1f1;
			}
			.loading{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%) rotate(75deg);
				width: 15px;
				height: 15px;
			}
			.loading::before,.loading::after{
				content: "";
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 15px;
				height: 15px;
				border-radius: 15px;
				animation: loading 1.5s infinite linear;
			}
			.loading::before{
				box-shadow: 15px 15px #e77f67, -15px -15px #778beb;
			}
			.loading::after{
				box-shadow: 15px 15px #f8a5c2, -15px -15px #f5cd79;
				transform: translate(-50%,-50%) rotate(90deg);
			}
			@keyframes loading{
				50%{
					height:45px;
				}
			}
		</style>
	</head>
	<body>
		<div class="loading"></div>
	</body>
</html>

视频来源于：https://www.youtube.com/watch?v=TgwcGBOPAak&t=22s

秋霜梦红尘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3 彩带扩散效果_利用CSS3动画实现圆圈由小变大向外扩散的效果实例
weixin_39626613的博客
12-23 348
前言本文主要给大家分享的是关于利用CSS3动画实现圆圈由小变大向外扩散的效果实例，文中涉及到 CSS3 的动画(animation)、2D 转换(transform: scale)css3中新增了一个animation的属性，该属性类似于创建一个animation对象如：animation: bounce 2.0s infinite ease-in-out;animation有以下几个参数：属性描...
天空飘彩带的css3代码_6种精美的纯CSS3丝带效果_css3类似商城折扣提示层代码
weixin_29531177的博客
12-23 524
一组非常精美的纯CSS3丝带设计效果。这组丝带效果分别使用:before和:after伪元素来制作各种丝带，适用于要使用丝带效果的各种不同场景。这些丝带效果的HTML结构：使用一个作为容器，在它里面放置一些元素。元素及其伪元素用于制作各种丝带效果。丝带效果1丝带效果2丝带效果3丝带效果4丝带效果5丝带效果6div.ribbon是丝带的容器，丝带放置在它的上面。在例子中它被设置为内联块元素，宽度使用...
星空代码html_html5+css3开发实战之超美月夜星空
weixin_39966602的博客
12-01 1754
css3动画可以实现很多好玩儿有趣的事情，让网页的效果实现了之前gif或者flash才能干的事情，css3动画简单好用。今天我们就以学习css3动画为目的完成一个很赞的页面具体效果如下：试想这样一个场景：在一个美妙的夜晚，天空中繁星点点 ，虽然还有淡淡的云层，但月亮依然明亮，我们看到有一个熟悉的身影从天空中掠过。一个看星星的小朋友问爸爸：“哇~，快看是圣诞老人吗?”小朋友爸爸回答："不也可能是送快...
CSS3实现渐变背景动画特效
明哥
03-21 2265
效果图： 具体实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>渐变背景动画</title> <style> body{ height: 100vh; width: 100vw; margin:
css3 三角形_CSS3实战汇总，让你在前端路上独秀一枝（附源码）
weixin_39630440的博客
11-29 87
css这块知识难点不是很多，更多的在于去熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是对自己工作中一些css高级技巧的总结，另一方面也是希望能教大家一些实用的技巧和高效开发css的方式，以提高在工作中的效率。我们将学到box-shadow的高级应用制作自适应的椭圆纯css3实现饼图进度动画用border来实现一个对话框样式css3 filter的简单应用css3伪元素实现自定义复...
CSS彩色滚动条
qq_54334713的博客
09-30 505
CSS彩色滚动条
css3 彩带扩散效果_利用纯css3实现圆形从中心向四周扩散动画效果代码
weixin_39937447的博客
12-23 303
先来个简单的示例，例如：@keyframes hovertreemove{from {top:30px;}to {top:130px;}}效果：http://hovertree.com/texiao/css3/37/1.htm可以通过 @keyframes 规则，创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变...
css3 彩带扩散效果_6种精美的纯CSS3丝带效果
weixin_42662171的博客
01-13 1384
这是一组非常精美的纯CSS3丝带设计效果。这组丝带效果分别使用:before和:after伪元素来制作各种丝带，适用于要使用丝带效果的各种不同场景。使用方法HTML结构这些丝带效果的HTML结构：使用一个作为容器，在它里面放置一些元素。元素及其伪元素用于制作各种丝带效果。丝带效果1丝带效果2丝带效果3丝带效果4丝带效果5丝带效果6CSS样式div.ribbon是丝带的容器，丝带放置在它的上面。在例...
css 常见的动画效果
前端Cocoko
08-19 4058
[style] .container { position: absolute; width: 200px; height: 200px; padding: 5px; border: 5px solid rgb(118,218,255); top: 50%; left: 50%; transform: transla...
CSS3实现条纹背景
Mi的博客
06-06 3405
条纹背景 水平条纹 1.我们先创建一个渐变背景 background: linear-gradient(#fb3, #58a); 2.逐渐拉近两个色标，当两个色标重合在一起，效果如图所示 background: linear-gradient(#fb3 50%, #58a 50%); 如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最...
js实现彩色条纹滚动条效果
12-09
左侧可用调色板选择条纹颜色 效果图： 代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{margin:0; padding:0;} @-webkit-keyframes demo{ from{ left:0;} to{ left:-113px;} } .box{ width:120px; height:400px; border:1px solid #000; margin:100px auto; position:relative; overflow:hidden;
CSS3发光线条旋转加载动画特效.zip
07-04
CSS3发光线条旋转加载动画特效是一款两条弧形发光彩色线条旋转动画特效。
html5 CSS3 Canvas 彩带飞舞动画，很不错.rar
07-10
这是一个由html5 CSS3 Canvas 技术生成的彩带飞舞动画，很不错的炫丽效果，没使用任何的图片修饰，全部是Canvas生成的彩带效果，再加入动画的控制（由JavaScript来实现），最终形成了十分炫酷的效果。同时本效果也可成为你学习HTML5 Canvas技术的绝佳范例。
纯CSS3实现超酷的磁带动画
08-23
记得之前分享过一款HTML5磁带式古典播放器，效果相当震撼。这次我们要用纯CSS3来实现一个超酷的磁带动画特效。首先用纯CSS3绘制了一个磁带的外观，还是相当逼真的，然后用CSS3的动画属性实现了磁带的旋转，就像在播放歌曲一样，如果配合HTML5的音频播放功能，就和那个磁带播放器差不多了。
CSS3彩带圣诞树旋转动画特效
07-24
CSS3彩带圣诞树旋转动画特效是一款挂着星星的彩带圣诞树，线条圣诞树动画特效。
段落文字彩条效果
whqet
02-07 3694
程序媛and程序猿，兄弟姐妹们，大家周末好，我们今天来研读一下利用纯css实现段落文字的彩条效果。有朋友就说了，不就是css3的渐变吗，最多加上webkit内核的-webkit-background-clip，嗯，远不止哟，进来一坐了解详情……
3种纯CSS实现中间镂空的12色彩虹渐变圆环方法
weixin_33889665的博客
10-02 1883
转载自张旭鑫一、从SVG实现多彩圆环倒计时效果说起 上周我做了个demo，使用SVG和stroke-dasharray和stroke-dashoffset特性实现了一个彩条圆环倒计时效果，大概长下面这样子： 原理是使用两个渐变半圆无缝叠加在一起。 使用SVG实现的优点是兼容性非常好，IE9浏览器也是支持的。 不足在于学习成本比较高，相关的SVG代码要想完整的手写出来，还是需要不少积累的。 于是我...
css条纹动画实现
weixin_34220834的博客
02-28 424
2019独角兽企业重金招聘Python工程师标准>>> ...
纯CSS3实现（无图片）的彩色条纹电子明信片
陈小峰（iefreer）的专栏
02-04 3323
使用纯CSS3实现的明信片，未使用图片，比较简洁实用。思路是通过DIV和DIV:after元素叠加而成，DIV:after用来构造一个斜向渐变（linear-gradient方法）彩色条纹，然后放置在DIV的背后，调整好相对位置。
css loading加载动画
最新发布
08-26
CSS loading加载动画可以使用单个元素来完成。这意味着你只需要一个div元素，而不需要复制大量代码。你可以向这个div元素中添加一个类，以启动loading效果。 在选择加载提示动画时，你可以考虑使用一些经典的款式，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值