HTML5教程

变色云彩（html+css）

本文主要是介绍变色云彩（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>

 

这篇关于变色云彩（html+css）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航