波浪竖线样式的加载动画

最新推荐文章于 2021-03-10 21:13:54 发布
最新推荐文章于 2021-03-10 21:13:54 发布
阅读量518 收藏 1
点赞数
分类专栏： IT js css html 文章标签： 波浪竖线样式的加载动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43209114/article/details/95340656
版权
IT 同时被 3 个专栏收录
83 篇文章 2 订阅
订阅专栏
js
46 篇文章 0 订阅
订阅专栏
html
41 篇文章 1 订阅
订阅专栏 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.loading {
				height: 100%;
				width: 100%;
				position: fixed;
				background: rgba(255, 255, 255, 1);
				z-index: 9999999999999999999999999999;
			}
			
			.loading>p {
				position: absolute;
				left: 54px;
				right: 0;
				bottom: 61.8%;
				margin: auto;
				height: 30px;
				width: 120px;
			}
			
			.loading>p i {
				display: block;
				float: left;
				margin: 0 5px;
				width: 5px;
				height: 30px;
				background: #000;
				transform: scaleY(0.3);
				animation: loading 1s ease infinite alternate;
			}
			
			.loading>p i:nth-child(2) {
				animation-delay: 0.1s;
			}
			
			.loading>p i:nth-child(3) {
				animation-delay: 0.2s;
			}
			
			.loading>p i:nth-child(4) {
				animation-delay: 0.3s;
			}
			
			.loading>p i:nth-child(5) {
				animation-delay: 0.4s;
			}
			
			@keyframes loading {
				40%,
				100% {
					transform: scaleY(0.3);
				}
				20% {
					transform: scaleY(1);
				}
			}
		</style>
	</head>

	<body>
		<div class="loading">
			<p>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
			</p>
		</div>
	</body>
	<script>
		$(window).load(function() {
			$('.loading').fadeOut();
		});
	</script>

</html>

（刚刚发现技术胖也写过。地址贴上，可以看看。技术胖loading css实现）

QSWQSWQSWQSWQSW
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
波浪进度加载动画
05-23
利用CAShapeLayer绘制的一个波浪进度动画,可自定义颜色
HTML5圆形波浪加载动画特效.zip
07-04
HTML5圆形波浪加载动画特效是一款原生html5 css3 canvas波浪滚动上升加载动画，圆形加载容器效果。
波浪过程下载Loading动画
BIGPiePieTree的博客
12-04 3990
Loading 动画         一直都觉得有很多loading动画挺炫酷的，然后自己看过一些之后也想实现一个，加强一下对绘制view的练习，能力有限，很多地方的实现的有欠考虑和逻辑优化，不管怎么样画了两天还是把效果做的还可以。先看一下效果图吧。
水波浪型的进度加载器
weixin_30902675的博客
10-30 101
话不多说，先上效果图 下面说说原理，基本原理就是不停的绘制一条正弦曲线，曲线方程为y=A*Sin（w*x+fai）+k 参数A是波浪振幅，A越大，波浪高度越大，基线K是就能直接表现进度，会随着进度的增大而减小 w参数很重要，表示了图像的紧密程度，设置的小一点就会让图像较为平缓，初相fai，表示当X等于0时候的第一个位置 在代码中不停的变化这个参数，...
android自定义波浪加载动画的实现代码
08-26
在WaveView控件中，我们可以自定义波浪加载动画的样式，例如，波浪1的颜色、边框颜色、文字颜色、文字大小等。 ```java public void setWaveColor1(int color) { mWaveColor1 = color; invalidate(); } public ...
纯css3音阶波浪loading加载动画特效
09-04
【纯CSS3音阶波浪加载动画特效】是一种利用现代浏览器对CSS3特性的支持，创建出具有音乐旋律感和动态视觉效果的加载指示器。这个加载动画通过纯CSS3技术，无需JavaScript或其他编程语言，就能实现优雅且引人入胜的...
CSS3音阶波浪Loading加载代码
06-24
【CSS3音阶波浪Loading加载代码】是一种利用现代浏览器对CSS3特性的支持，创建出的富有动态美感的网页加载动画。这种加载效果通过精细的CSS3样式控制，模拟出音阶波动的视觉效果，为用户在等待网页内容加载时提供了...
html5 css3圆形波浪百分比加载动画特效
06-11
简单漂亮的html5 css3圆形波浪百分比加载动画特效，canvas波浪滚动上升网页加载动画效果。
WaveLoadingView – 一个Android库帮你轻松实现波浪式加载
农村打工仔的博客
03-10 303
WaveLoadingView 是一个Android库帮你轻松实现波浪式加载，提供高度定制（各种姿势），总有一种玩法适合你。 Sample 仓库地址： https://github.com/tangqi92/WaveLoadingView
html5 css3圆形波浪百分比加载动画特效.zip
07-11
js代码 [removed] var wave = (function () { var ctx; var waveImage; var canvasWidth; var canvasHeight; var needAnimate = false; function init (callback) { var wave = document.getElementById('wave'); var canvas = document.createElement('canvas'); if (!canvas.getContext) return; ctx = canvas.getContext('2d'); canvasWidth = wave.offsetWidth; canvasHeight = wave.offsetHeight; canvas.setAttribute('width', canvasWidth); canvas.setAttribute('height', canvasHeight); wave.appendChild(canvas); waveImage = new Image(); waveImage.onload = function () { waveImage.onload = null; callback(); } waveImage.src = 'images/wave.png'; } function animate () { var waveX = 0; var waveY = 0; var waveX_min = -203; var waveY_max = canvasHeight * 0.7; var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; function loop () { ctx.clearRect(0, 0, canvasWidth, canvasHeight); if (!needAnimate) return; if (waveY < waveY_max) waveY = 1.5; if (waveX < waveX_min) waveX = 0; else waveX -= 3; ctx.globalCompositeOperation = 'source-over'; ctx.beginPath(); ctx.arc(canvasWidth/2, canvasHeight/2, canvasHeight/2, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); ctx.globalCompositeOperation = 'source-in'; ctx.drawImage(waveImage, waveX, canvasHeight - waveY); requestAnimationFrame(loop); } loop(); } function start () { if (!ctx) return init(start); needAnimate = true; setTimeout(function () { if (needAnimate) animate(); }, 500); } function stop () { needAnimate = false; } return {start: start, stop: stop}; }()); wave.start(); [removed]
轻松实现波浪式加载
04-05
作者tangqi92，源码WaveLoadingView，WaveLoadingView - 帮你轻松实现波浪式加载，提供高度定制（各种姿势），总有一种玩法适合你。
jquery点击出现波浪纹
01-06
基于jQuery鼠标点击水波动画竖直导航代码，jQuery+CSS3实现的带动画效果的竖直导航栏特效
jquery浮动层动画loading页面加载特效
11-13
jquery浮动层特效或弹出层特效loading页面加载过程，异步加载loading特效。提示用户loading页面加载效果。
加载动画(直线型)
08-30
加载动画实现
css 简单的波浪加载的动画
liangyk1005的博客
07-01 624
<!DOCTYPE html> <html> <head> <meta charset='uft-8'> <title>简单的波浪加载的动画</title> <style type="text/css"> *{ padding: 0; margin: 0; } html,body{ height: 100%; widt.
波浪线 - 动图
qq_41880285的博客
10-08 714
Activity-Main.xml &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" ...
自定义波浪加载小球
luweicheng24的博客
08-01 1160
功能来源于需求 ，给我一盒画笔，我将画出整个世界。 本篇记录一次自定义类似加速球的自定义实现： 效果图 具体实现 为了实现这样的一个效果，就必须自定义View，进行自定义布局初始 化以及定义变量等： private Paint mPaint; //基本画笔 private Paint textPaint; //文字画笔 private Path path; //路径
Android仿英雄联盟/斗鱼波形加载动画
The glory behind always be alone with.
11-26 1024
先上效果图： 实现原理： 通过自定义一个布局，继承自LinearLayout，然后在这个布局当中添加5条竖线，也即是5个矩形View；通过对这5个View分别加入属性动画，即可实现。动画是一个组合动画：纵向向后旋转以及纵向的伸缩。具体代码：/** * 仿英雄联盟波形加载动画 * @author yangmbin * created at 2016/11/25 17:17 */ publi
css 波浪动画效果
最新发布
10-12
要实现 CSS 波浪动画效果，可以使用 CSS3 的 transform 和 animation 属性，具体实现方法如下： 1. 首先，需要创建一个波浪形状的 div 元素，并设置其样式为圆形或其他形状。 2. 然后，使用 CSS3 的 transform 属性将该元素旋转一定角度，使其呈现出波浪形状。 3. 接着，使用 CSS3 的 animation 属性创建一个动画效果，使该元素在一定时间内不断旋转，从而呈现出波浪动画效果。 下面是一个简单的 CSS 波浪动画效果的示例代码： ```html <div class="wave"></div> ``` ```css .wave { width: 100px; height: 100px; border-radius: 50%; background-color: #00bcd4; position: relative; animation: wave 2s ease-in-out infinite; } @keyframes wave { 0% { transform: rotate(0deg); } 50% { transform: rotate(45deg); } 100% { transform: rotate(0deg); } } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值