变色云彩(html+css)
2022/6/13 23:22:05
本文主要是介绍变色云彩(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)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)
- 2024-01-12程序员提效 x10 的必备开源“神器”
- 2024-01-11前端可以监控静态资源的时间吗-icode9专业技术文章分享