变色云彩（html+css）
作者：互联网
css样式：
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.content {
width: 100%;
height: 100%;
position: relative;
top: 0;
right: 0;
}
section {
width: 100%;
height: 100%;
background-color: #007fd5;
overflow: hidden;
display: block;
position: relative;
top: 0;
right: 0;
/*设置动画 名字 时间 速度 循环播放*/
animation: bg 15s linear infinite;
}
section div {
width: 300%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
section div:nth-child(1) {
background-image: url("../img/clody01.png");
/*设置动画 名字 时间 速度 循环播放*/
animation: run 50s linear infinite;
}
section div:nth-child(2) {
background-image: url("../img/clody02.png");
/*设置动画 名字 时间 速度 循环播放*/
animation: run 100s linear infinite;
}
section div:nth-child(3) {
background-image: url("../img/clody03.png");
/*设置动画 名字 时间 速度 循环播放*/
animation: run 190s linear infinite;
}
/*设置彩云动画的播放*/
@keyframes run{
0% {
left: 0%;
}
20% {
left: -40%;
}
40% {
left: -100%;
}
100% {
left: -200%;
}
}
/*设置天空的动画*/
@keyframes bg {
0% {
background-color: #007fd5;
}
50% {
background-color: black;
}
100% {
background-color: black;
}
}
.box {
width: 300px;
height: 300px;
position: absolute;
left: 35%;
top: 35%;
background-image: url("../img/卡通.jpg");
background-repeat: no-repeat;
background-size: cover;
/*设置盒子的边框*/
border-top: 5px solid red;
border-right: 5px solid #007fd5;
border-bottom: 5px solid orange;
border-left: 5px solid wheat;
border-radius: 30%;
/*设置过滤 参数：所有样式 过滤时间*/
transition: all 0.5s;
}
/*盒子触发*/
.box:hover {
/*设置盒子 旋转 缩放*/
transform: rotate(-720deg) scale(1.5);
background-image: url("../img/我们.jpg");
}
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变化云彩</title>
<link href="css/变化云彩.css" rel="stylesheet">
</head>
<body>
<div class="content">
<audio src="music/樱花樱花想见你%20-%20李蚊香%20(4).mp3" controls></audio>
<section>
<div></div>
<div></div>
<div></div>
</section>
<div class="box">
</div>
</div>
</body>
</html>
标签：动画,img,100%,html,background,云彩,section,css,left 来源： https://www.cnblogs.com/whyhome/p/16372529.html