网页动画气泡效果

最新推荐文章于 2024-05-07 05:45:24 发布

Wrj6811

最新推荐文章于 2024-05-07 05:45:24 发布

阅读量954

点赞数 3

分类专栏：前端小功能 js css 文章标签： html js css3

本文链接：https://blog.csdn.net/Wrj6811/article/details/107679181

版权

前端小功能同时被 3 个专栏收录

22 篇文章 1 订阅

订阅专栏

21 篇文章 0 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

打开网页，从网页底部生成一个一个的气泡，然后气泡上升到页面顶部消失。

利用 setinterval定时器定时，每50毫秒生成一个气泡，然后设置他的样式，出现效果

效果图：

页面布局代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页动画气泡效果</title>
		<link rel="stylesheet" type="text/css" href="../lib/css/qipao.css"/>
	</head>
	<body>
		<section>
			<h2>hello world</h2>
		</section>
	</body>
	<script type="text/javascript">
		function createBubble() {
			const section = document.querySelector('section')
			const createElement = document.createElement('span')
			var size = Math.random() * 60
			createElement.style.width = 20 + size + 'px'
			createElement.style.height = 20 + size + 'px'
			createElement.style.left = Math.random() * innerWidth + 'px'
			section.appendChild(createElement)
			setTimeout( () => {
				createElement.remove()
			},4000)
		}
		setInterval(createBubble,50)
	</script>
</html>

css代码：

*{
	margin: 0;
	padding: 0;
	font-family: consolas;
}
section{
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background: #111;
	display: flex;
	justify-content: center;
	align-items: center;
}
section h2{
	font-size: 10em;
	color: #333;
}
section span {
	position: absolute;
	bottom: -50px;
	background: transparent;
	border-radius: 50%;
	pointer-events: none;
	box-shadow: inset 0 0 10px rgba(255,255,255,0.5);
	animation: animate 4s linear infinite;
}
section span:before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	transform: scale(0.25) translate(-70%,-70%);
	background: radial-gradient(#fff,transparent);
	border-radius: 50%;
	
}
@keyframes animate{
	0%{
		transform: translateY(0%);
		opacity: 1;
	}
	99%{
		opacity: 1;
	}
	100%{
		transform: translateY(-1200%);
		opacity: 0;
	}
}

Wrj6811

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
网页动画气泡效果

打开网页，从网页底部生成一个一个的气泡，然后气泡上升到页面顶部消失。利用 setinterval定时器定时，每50毫秒生成一个气泡，然后设置他的样式，出现效果效果图：页面布局代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>网页动画气泡效果</title> <link rel="stylesheet" type="te.
复制链接

扫一扫

专栏目录