【CSS动画】顶部仿youtube，csdn-实现顶部进度条demo

最新推荐文章于 2023-12-17 01:50:58 发布

土生土长的IU

最新推荐文章于 2023-12-17 01:50:58 发布

阅读量267

点赞数

分类专栏： CSS 文章标签： css jquery html

本文链接：https://blog.csdn.net/AIB_Kasic/article/details/105835362

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

引用了线上的jquery文件, 复制新建html文件可实现demo.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
		<title>进度条</title>
	</head>
<style type="text/css">
	body {
		margin: 0;
		padding: 0;
	}
	
	p {
		margin: 0;
	}
	
	@-moz-keyframes progressing {
		0% {
			width: 0px;
		}
		100% {
			width: 100%;
		}
	}
	
	@-webkit-keyframes progressing {
		0% {
			width: 0px;
		}
		100% {
			width: 100%;
		}
	}
	
	.progress {
		width: 100%;
		height: 2px;
		overflow: hidden;
		background-color: #27ccc0;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9;
		-moz-animation: progressing 2s ease-out;
		-webkit-animation: progressing 2s ease-out;
	}

</style>

	<body>
		<p class="progress"></p>
	</body>
	<script type="text/javascript">
	//	监听进度条结束
	//实际开发中一旦接口调用成功就可以隐藏
	$('.progress').one('animationend',function(){
		console.log('动画结束');
		$('.progress').hide();
	})
	</script>
</html>

土生土长的IU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS动画】顶部仿youtube，csdn-实现顶部进度条demo

引用了线上的jquery文件, 复制新建html文件可实现demo.<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js">&l...
复制链接

扫一扫

专栏目录