前端实例1-h5+css

最新推荐文章于 2021-03-20 12:07:08 发布

乐乐今天没bug

最新推荐文章于 2021-03-20 12:07:08 发布

阅读量346

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41826265/article/details/103586483

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

需求

用h5+css实现一个太阳升起来,白云到处飘的动画
要求太阳只飘起来一次,白云要在太阳升起来之后飘来飘去

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>蓝天白云</title>
	<style>
		#box{
			height: 700px;
			width: 1300px;
			background: skyblue;
		}
		#sun{
			height: 100px;
			width: 100px;
			border-radius: 50%;
			background: red;
			position: absolute;
			animation: sunmove 3s forwards;
		}
		#cloud{
			height: 70px;
			width: 200px;
			border-radius:50%;
			top:120px;
			background: white;
			position: absolute;
			animation: sunmove 3s 3s infinite alternate;
		}
		@keyframes sunmove{
			0%{
				left:20px;
			}
			100%{
				left:500px;
			}
		}
	</style>
</head>
<body>
	<div id="box">
		<div id="sun"></div>
		<div id="cloud"></div>
	</div>
</body>
</html>

发现的问题和解决方案

动画不动
检查了很多遍发现其实是因为sun和cloud没有设置position,设置上就好了
云和太阳一起动
给云设置一个延迟时间刚好是太阳动画的时间就行了

乐乐今天没bug

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
前端实例1-h5+css

文章目录需求代码实现发现的问题和解决方案需求用h5+css实现一个太阳升起来,白云到处飘的动画要求太阳只飘起来一次,白云要在太阳升起来之后飘来飘去代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>蓝天白云</title&g...
复制链接

扫一扫

专栏目录