<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 动画</title>
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background-color: #0EA9B1;
}
section {
height: 100%;
position: relative;
overflow: hidden;
}
.bg1, .bg2 {
position: absolute;
left: 0;
/*bottom: 0;*/
width: 100%;
}
.bg1 {
bottom: 20px;
height: 211px;
background-image: url(./1.png);
/*调用*/
animation: move 1s linear infinite;
}
.bg2 {
bottom: 0;
height: 235px;
background-image: url(./2.png);
animation: move 1s linear infinite;
}
.sun {
width: 50px;
height: 50px;
background-color: #FFF;
border-radius: 25px;
position: absolute;
left: 200px;
top: 100px;
}
.sun::before, .sun::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #FFF;
border-radius: 25px;
}
.sun::before {
animation: scale 1s infinite linear;
}
.sun::after {
animation: scale 1s 0.5s infinite linear;
}
@keyframes scale {
0% {
/*transform: scale(1);
opacity: 1;*/
}
100% {
transform: scale(2);
opacity: 0;
}
}
/*动画序列*/
@keyframes move {
0% {
/**/
}
50% {
bottom: -20px;
}
100% {
/**/
}
}
</style>
</head>
<body>
<section>
<div class="sun"></div>
<div class="bg1"></div>
<div class="bg2"></div>
</section>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 动画</title>
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background-color: #0EA9B1;
}
section {
height: 100%;
position: relative;
overflow: hidden;
}
.bg1, .bg2 {
position: absolute;
left: 0;
/*bottom: 0;*/
width: 100%;
}
.bg1 {
bottom: 20px;
height: 211px;
background-image: url(./1.png);
/*调用*/
animation: move 1s linear infinite;
}
.bg2 {
bottom: 0;
height: 235px;
background-image: url(./2.png);
animation: move 1s linear infinite;
}
.sun {
width: 50px;
height: 50px;
background-color: #FFF;
border-radius: 25px;
position: absolute;
left: 200px;
top: 100px;
}
.sun::before, .sun::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #FFF;
border-radius: 25px;
}
.sun::before {
animation: scale 1s infinite linear;
}
.sun::after {
animation: scale 1s 0.5s infinite linear;
}
@keyframes scale {
0% {
/*transform: scale(1);
opacity: 1;*/
}
100% {
transform: scale(2);
opacity: 0;
}
}
/*动画序列*/
@keyframes move {
0% {
/**/
}
50% {
bottom: -20px;
}
100% {
/**/
}
}
</style>
</head>
<body>
<section>
<div class="sun"></div>
<div class="bg1"></div>
<div class="bg2"></div>
</section>
</body>
</html>