<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,width=device-width" />
<title>庆祝抗战胜利70周年CSS3特效 - 网页模板</title>
<link id="common_css" rel="stylesheet" href="css/style.css">
<script src="js/viewport.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
font-family: "microsoft yahei";
}
img {
display: block;
}
.wrap {
height: 100%;
width: 640px;
margin: 0 auto;
background: #c03430;
position: relative;
animation:opc 3s ease-in 1s backwards;
-webkit-animation:opc 3s ease-in 1s backwards;
overflow:hidden
}
.yanhua1 {
border-radius:50%;
position: absolute;
width: 250px;
height: 250px;
background: linear-gradient(rgba(115,197,251,1), rgba(115,197,251,1)), url(images/hua1.png) no-repeat center center;
background: -webkit-linear-gradient(rgba(115,197,251,1),rgba(115,197,251,1)), url(images/hua1.png) no-repeat center center;
background-size: 100% 100%,100% 100%;
top: 50px;
left: 45px;
z-index: 1;
animation: yanhua 3s ease-out infinite 8s backwards,yanse1 3s ease-out infinite 8s backwards,touming 3s ease-out infinite 8s backwards;
-webkit-animation: yanhua 3s ease-out infinite 8s backwards,yanse1 3s ease-out infinite 8s backwards,touming 3s ease-out infinite 8s backwards;
box-shadow:0 0 20px rgba(115,197,251,1);
}
.yanhua2 {
border-radius:50%;
position: absolute;
width: 330px;
height: 330px;
background: linear-gradient(rgba(245,231,210,1),rgba(245,231,210,1)), url(images/hua2.png) no-repeat center center;
background: -webkit-linear-gradient(rgba(245,231,210,1),rgba(245,231,210,1)), url(images/hua2.png) no-repeat center center;
background-size: 100% 100%,100% 100%;
top: 230px;
left: 277px;
z-index: 2;
animation: yanhua 3s ease-out infinite 9s backwards,yanse2 3s ease-out infinite backwards 9s,touming 3s ease-out infinite 9s backwards;
-webkit-animation: yanhua 3s ease-out infinite 9s backwards,yanse2 3s ease-out infinite backwards 9s,touming 3s ease-out infinite 9s backwards;
box-shadow:0 0 20px rgba(245,231,210,1);
}
.yanhua3 {
border-radius:50%;
position: absolute;
width: 350px;
height: 350px;
background: linear-gradient(rgba(154,134,255,1),rgba(154,134,255,1)), url(images/hua3.png) no-repeat center center;
background: -webkit-linear-gradient(rgba(154,134,255,1), rgba(154,134,255,1)), url(images/hua3.png) no-repeat center center;
background-size: 100% 100%,100% 100%;
top: 384px;
left: 44px;
z-index: 3;
animation: yanhua 3s ease-out infinite 8.5s backwards,yanse3 3s ease-out infinite backwards 8.5s,touming 3s ease-out infinite 8.5s backwards;
-webkit-animation: yanhua 3s ease-out infinite 8.5s backwards,yanse3 3s ease-out infinite backwards 8.5s,touming 3s ease-out infinite 8.5s backwards;
}
.land {
position: absolute;
bottom: 0;
left: 0;
width: 640px;
z-index: 9
}
.land img {
width: 100%
}
.ren1 {
width: 184px;
height: 235px;
left: 48px;
bottom: 140px;
position: absolute;
z-index: 20;
animation:opc 3s linear 4s backwards;
-webkit-animation:opc 3s linear 4s backwards;
}
.ren1 img {
width: 100%;
height: 100%
}
.ren2 {
width: 136px;
height: 200px;
left: 212px;
bottom: 140px;
position: absolute;
z-index: 20;
animation:opc 3s linear 7.5s backwards;
-webkit-animation:opc 3s linear 7.5s backwards;
}
.ren2 img {
width: 100%;
height: 100%
}
.ren3 {
width: 97px;
height: 114px;
left: 332px;
bottom: 140px;
position: absolute;
z-index: 20;
animation:opc 3s linear 6s backwards;
-webkit-animation:opc 3s linear 6s backwards;
}
.ren3 img {
width: 100%;
height: 100%
}
.ren4 {
width: 173px;
height: 225px;
left: 406px;
bottom: 140px;
position: absolute;
z-index: 20;animation:opc 3s linear 5s backwards;
-webkit-animation:opc 3s linear 5s backwards;
}
.ren4 img {
width: 100%;
height: 100%
}
.zhounian {
position: absolute;
width: 221px;
height: 199px;
margin: auto;
left: 0;
right: 0;
top: 250px;
z-index: 99;
animation:topopc 1.5s linear 12s backwards;
-webkit-animation:topopc 1.5s linear 12s backwards;
}
.zhounian2 {
position: absolute;
width: 406px;
height: 44px;
margin: auto;
left: 0;
right: 0;
bottom: 40px;
z-index: 99;
animation:opc 1.5s ease-in 9.5s backwards;
-webkit-animation:opc 1.5s ease-in 9.5s backwards;
}
@keyframes yanhua {
0% {
transform:translateY(300%) scale(0.05)
}
50% {
transform:translateY(0%) scale(0.05)
}
100% {
transform:translateY(0%) scale(1)
}
}
@-webkit-keyframes yanhua {
0% {
-webkit-transform: translateY(300%) scale(0.05)
}
50% {
-webkit-transform:translateY(0%) scale(0.05)
}
100% {
-webkit-transform:translateY(0%) scale(1)
}
}
@keyframes yanse1 {
0% {
background: linear-gradient(rgba(115,197,251,1), rgba(115,197,251,1)), url(images/hua1.png) no-repeat center center;
box-shadow:0 0 20px rgba(115,197,251,1);
}
49% {
background: linear-gradient(rgba(115,197,251,1), rgba(115,197,251,1)), url(images/hua1.png) no-repeat center center;
box-shadow:0 0 20px rgba(115,197,251,1);
}
50% {
background: linear-gradient(rgba(115,197,251,0), rgba(115,197,251,0)), url(images/hua1.png) no-repeat center center;
box-shadow:0 0 20px rgba(115,197,251,0);
}
100% {
background: linear-gradient(rgba(115,197,251,0), rgba(115,197,251,0)), url(images/hua1.png) no-repeat center center;
box-shadow:0 0 20px rgba(115,197,251,0);
}
}
@-webkit-keyframes yanse1 {
0% {
background:-webkit-linear-gradient(rgba(115,197,251,1), rgba(115,197,251,1)), url(images/hua1.png) no-repeat center center;
box-shadow:0 0 20px rgba(115,197,251,1);
}
49% {
background:-webkit-linear-gradient(rgba(115,197,251,1), rgba(115,197,251,1)), url(images/hua1.png) no-repeat center center;
box-shadow:0 0 20px rgba(115,197,251,1);
}
50% {
background:-webkit-linear-gradient(rgba(115,197,251,0), rgba(115,197,251,0)), url(images/hua1.png) no-repeat center center;
box-shadow:0 0 20px rgba(115,197,251,0);
}
100% {
background: -webkit-linear-gradient(rgba(115,197,251,0), rgba(115,197,251,0)), url(images/hua1.png) no-repeat center center;
box-shadow:0 0 20px rgba(115,197,251,0);
}
}
@keyframes yanse2 {
0% {
background: linear-gradient(rgba(245,231,210,1), rgba(245,231,210,1)), url(images/hua2.png) no-repeat center center;
box-shadow:0 0 20px rgba(245,231,210,1);
}
49% {
background: linear-gradient(rgba(245,231,210,1), rgba(245,231,210,1)), url(images/hua2.png) no-repeat center center;
box-shadow:0 0 20px rgba(245,231,210,1);
}
50% {
background: linear-gradient(rgba(245,231,210,0), rgba(245,231,210,0)), url(images/hua2.png) no-repeat center center;
box-shadow:0 0 20px rgba(245,231,210,0);
}
100% {
background: linear-gradient(rgba(245,231,210,0), rgba(245,231,210,0)), url(images/hua2.png) no-repeat center center;
box-shadow:0 0 20px rgba(245,231,210,0);
}
}
@-webkit-keyframes yanse2 {
0% {
background:-webkit-linear-gradient(rgba(245,231,210,1), rgba(245,231,210,1)), url(images/hua2.png) no-repeat center center;
box-shadow:0 0 20px rgba(115,197,251,1);
}
49% {
background:-webkit-linear-gradient(rgba(245,231,210,1), rgba(245,231,210,1)), url(images/hua2.png) no-repeat center center;
box-shadow:0 0 20px rgba(245,231,210,1);
}
50% {
background:-webkit-linear-gradient(rgba(245,231,210,0), rgba(245,231,210,0)), url(images/hua2.png) no-repeat center center;
box-shadow:0 0 20px rgba(245,231,210,0);
}
100% {
background: -webkit-linear-gradient(rgba(245,231,210,0), rgba(245,231,210,0)), url(images/hua2.png) no-repeat center center;
box-shadow:0 0 20px rgba(245,231,210,0);
}
}
@keyframes yanse3 {
0% {
background: linear-gradient(rgba(154,134,255,1), rgba(154,134,255,1)), url(images/hua3.pn
庆祝抗战胜利70周年CSS3特效.zip
版权申诉
34 浏览量
2022-11-26
11:03:26
上传
评论
收藏 414KB ZIP 举报
庆祝抗战胜利70周年CSS3特效.zip （17个子文件） 
庆祝抗战胜利70周年CSS3特效 
庆祝抗战胜利70周年CSS3特效.jpg 63KB jiaoben3634 css 
animate.min.css 60KB swiper.min.css 15KB style.css 877B images 
hua3.png 94KB land.png 4KB 70.png 4KB ren2.png 39KB ren4.png 45KB hua1.png 38KB hua2.png 63KB ren3.png 15KB huanying.png 16KB peace.png 5KB ren1.png 28KB
index.html 11KB js viewport.js 2KB资源评论
