用CSS3做夜月白云飘

长路漫漫兮，吾修远道

已于 2025-05-20 09:10:49 修改

阅读量236

点赞数

文章标签： css3 前端 css

于 2019-02-20 00:35:22 首次发布

本文链接：https://blog.csdn.net/weixin_44550157/article/details/87746660

版权

用CSS3做夜月白云飘

开发工具与关键技术：DW /css3;
撰写时间：2019年2月18日；

因为某些原因，撰写时间和发表时间不一致，请原谅；
用简单代码做一个做夜月白云飘

在这里插入图片描述

<div class="sky">
			<div class="moon"  ></div>
			<div class="one"></div>
			<div class="two"></div>
			<div class="three"></div>
	</div>

然后添加元素属性，CSS代码为：

@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
}
.sky{
  width: 1496px;
  height: 480px;
  overflow: hidden;
  background: #000;
  position: relative;
}
.sky .one {
  background: url( ../白云/cloud_one.png);
  position: absolute;
  left: 0;
  top: 0;
  width: 4437px;
  height: 500px;
  opacity: 1;
  animation: my_one 50s linear infinite;
  transform: translate3d(0, 0, 0);
}

.sky .two {
	background: url( ../白云/cloud_two.png);
	position: absolute;
	left: 0;
	top: 0;
	height: 500px;
	width: 4437px;
	opacity: 0.9;
	animation: my_two 75s linear infinite;
	transform: translate3d(0, 0, 0);
}

.sky .three {
  background: url( ../白云/cloud_three.png);
  position: absolute;
  left: 0;
  top: 0;
  width: 4437px;
  height: 500px;
	opacity: 0.9;
  animation: my_three 100s linear infinite;
  transform: translate3d(0, 0px, 0);
}
@keyframes my_one {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}
@keyframes my_two {
  0% {
	left: 0
  }
  100% {
	left: -200%
  }
}
@keyframes my_three {
  0% {
	left: 0;
  }
  100% {
	left: -200%
  }
}
.sky .on{
	 transform: translate3d(0, 0px, 0);
	 height: 100px;
	 width: 50px;
	 background:#FFD600;
	 position: fixed;
	 top: 40%;
	 left: 30%;
	 opacity: 0.9;
	 box-shadow:  0px 0px  100px  #FFDD00;
}
.moon{
	background: radial-gradient(ellipse at center, #ffd000 1%, #f9b700 39%, #f9b700 39%, #e06317 100%);
	transform: translate3d(0, 0px, 0px);
	box-shadow:  0px 0px  100px  #FFDD00;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
	animation: myfirst 50s linear infinite;
}
@keyframes myfirst{
	0%{
		top: 260px;
		left: 0px;
	}
	50%{
		top: 60px;
		left: 748px;
	}
	100%{
		top: 160px;
		left: 1496px;
	}
}