-
效果图:
2GIF.gif
- 6.css3动画大海波涛.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6.css3动画大海波涛.html</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
background-color: #0ea9b1;
overflow: hidden; /*清除右侧出现的滚动条*/
}
img{
width: 100%;
height: auto;
position: absolute;
bottom: 0;
left: 0;
/*animation: move 2s ease infinite;*/
}
img:first-child{
animation: move 2s linear infinite;
}
img:last-child{
animation: move 2s ease infinite;
}
.sun{
width: 100px;
height: 100px;
/*background-color: pink;*/
margin: 100px;
position: relative;
}
.sun::before, .sun::after{ /*让两个盒子水平垂直居中*/
content: ""; /*必须要有content*/
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
animation: sun 2s ease infinite;
}
.sun::after{
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.6);
animation: sun 3s ease infinite;
}
@keyframes move{
0%{
bottom: 0;
}
50%{
bottom: -50px;
}
100%{
bottom: 0;
}
}
@keyframes sun{
0%{
transform: translate(-50%, -50%) scale(1);
box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.7);
}
50%{
transform: translate(-50%, -50%) scale(1.1);
box-shadow: 0px 0px 75px rgba(255, 255, 255, 0.7);
}
100%{
transform: translate(-50%, -50%) scale(1);
box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.7);
}
}
</style>
</head>
<body>
<div>
<div class="sun"></div>
<img src="images/1sea.png" alt="">
<img src="images/2sea.png" alt="">
</div>
</body>
</html>
