纯CSS3实现的阳光海鸥沙滩遮阳伞和比基尼美女风景动画效果源码
预览
代码如下
不是标准的当前h5的标准html文档，大家可以改改代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 明月海鸥海滩遮阳伞和比基尼美女风景画</title>
<style>
body {
background: black;
}
.container {
position: relative;
width: 800px;
height: 600px;
background: #B3D1F2;
margin: 90px auto;
overflow: hidden;
}
.sol {
position: absolute;
width: 172px;
height: 172px;
border-radius: 100%;
background: rgb(255, 243, 181);
background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 243, 181, 1) 52%, rgba(247, 221, 93, 1) 100%);
background: -webkit-radial-gradient(center ellipse, rgba(255, 243, 181, 1) 52%, rgba(247, 221, 93, 1) 100%);
background: radial-gradient(ellipse at center, rgba(255, 243, 181, 1) 52%, rgba(247, 221, 93, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fff3b5', endColorstr='#f7dd5d', GradientType=1);
margin: 21px 50px;
}
.sol3 {
position: absolute;
width: 112px;
height: 102px;
border-radius: 100%;
background: rgb(255, 243, 181);
background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 243, 181, 1) 52%, rgba(247, 221, 93, 1) 100%);
background: -webkit-radial-gradient(center ellipse, rgba(255, 243, 181, 1) 52%, rgba(247, 221, 93, 1) 100%);
background: radial-gradient(ellipse at center, rgba(255, 243, 181, 1) 52%, rgba(247, 221, 93, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#fff3b5', endColorstr='#f7dd5d', GradientType=1);
opacity: .3;
margin: 281px 75px;
}
.c1 {
position: absolute;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 90px solid #385B6B;
border-bottom: 50px solid transparent;
;
margin: 251px 509px
}
.c1::before {
content: "";
position: absolute;
width: 30px;
height: 21px;
background: #385B6B;
margin: -49px 88px
}
.c1::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #385B6B;
margin: -60px 65px
}
.c2 {
position: absolute;
border-bottom: 30px solid #0D4D6B;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
height: 0;
width: 30px;
margin: 261px 621px
}
.c2::before {
content: "";
position: absolute;
border-bottom: 21px solid #0D4D6B;
border-left: 12px solid transparent;
border-right: 9px solid transparent;
height: 0;
width: 30px;
margin: -7px -7px
}
.c2::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 90px solid #0D4D6B;
border-bottom: 50px solid transparent;
;
margin: -30px -12px
}
.c3 {
position: absolute;
border-bottom: 70px solid #0D4D6B;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
height: 0;
width: 50px;
margin: 231px 677px
}
.c3::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 70px solid #0D4D6B;
margin: -30px 12px
}
.lineas {
position: absolute;
z-index: 999;
}
.l1,
.l2,
.l3,
.l4,
.l5,
.l6,
.l7,
.l8 {
position: absolute;
width: 50px;
height: 1px;
background: white;
margin: 300px 30px
}
.l1 {
width: 70px;
margin: 300px 30px
}
.l2 {
width: 50px;
margin: 312px 90px
}
.l3 {
width: 30px;
margin: 325px 70px
}
.l4 {
width: 50px;
margin: 312px 330px
}
.l5 {
width: 70px;
margin: 318px 430px
}
.l6 {
width: 70px;
margin: 291px 670px
}
.l7 {
width: 50px;
margin: 303px 650px
}
.l8 {
width: 90px;
margin: 314px 670px
}
.l1,
.l3,
.l5,
.l7 {
-webkit-animation: brillo 3s alternate infinite;
animation: brillo 3s alternate infinite;
}
.l2,
.l4,
.l6,
.l8 {
-webkit-animation: brillo3 3s alternate infinite;
animation: brillo3 3s alternate infinite;
}
.girl {
position: absolute;
margin: 0 30px;
z-index: 999;
}
.arenas3 {
position: absolute;
width: 231px;
height: 90px;
border-radius: 100%;
background: #DBBC74;
z-index: 999;
margin: 55px 291px
}
.legs {
position: absolute;
width: 80px;
height: 21px;
border-radius: 100%;
background: #E2A581;
margin: 90px 300px;
-webkit-transform: rotate(21deg);
transform: rotate(21deg)
}
.legs::before {
content: "";
position: absolute;
width: 80px;
height: 21px;
border-radius: 100%;
background: #E2A581;
margin: -30px 75px;
-webkit-transform: rotate(-42deg);
transform: rotate(-42deg)
}
.legs3 {
position: absolute;
width: 80px;
height: 16px;
border-radius: 100%;
background: #E2A581;
margin: 73px 303px;
-webkit-transform: rotate(-9deg);
transform: rotate(-9deg)
}
.legs3::before {
content: "";
position: absolute;
width: 80px;
height: 16px;
border-radius: 100%;
background: #E2A581;
margin: 12px 75px;
-webkit-transform: rotate(18deg);
transform: rotate(18deg)
}
.brazos,
.brazos3 {
position: absolute;
width: 12px;
height: 50px;
border-radius: 100%;
background: #EA9D79;
}
.brazos {
margin: 30px 340px;
-webkit-transform: rotate(21deg);
transform: rotate(21deg)
}
.brazos3 {
margin: 30px 408px;
-webkit-transform: rotate(-21deg);
transform: rotate(-21deg)
}
.brazos::before,
.brazos3::before {
content: "";
position: absolute;
width: 12px;
height: 70px;
border-radius: 100%;
background: #EA9D79;
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
.brazos::before {
margin: 30px 0px;
}
.brazos3::before {
margin: 30px 0px;
}
.hands {
position: absolute;
width: 21px;
height: 9px;
border-radius: 100%;
background: #EA9D79;
margin: 93px -12px
}
.hands3 {
position: absolute;
width: 21px;
height: 9px;
border-radius: 100%;
background: #EA9D79;
margin: 93px 3px
}
.body3 {
position: absolute;
border-bottom: 30px solid #E067CA;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 30px;
margin: 63px 353px
}
.body3::before {
content: "";
position: absolute;
width: 53px;
height: 30px;
border-radius: 0 0 50px 50px;
background: black;
margin: 30px -12px
}
.body3::after {
content: "";
position: absolute;
border-top: 21px solid #E067CA;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 30px;
margin: -21px -12px
}
.body7 {
position: absolute;
width: 60px;
height: 12px;
border-radius: 9px;
background: #EA9D79;
margin: 30px 350px
}
.hut {
position: absolute;
width: 112px;
height: 112px;
border-radius: 100%;
background: #DD35B0;
margin: -75px 325px
}
.hut::before {
content: "";
position: absolute;
width: 35px;
height: 35px;
border-radius: 100%;
background: #E067CA;
margin: 40px 37px
}
.bird {
position: absolute;
margin: -300px -300px;
-webkit-animation: volar 12s linear infinite;
animation: volar 12s linear infinite;
}
.bird5 {
position: absolute;
margin: -291px -330px;
-webkit-animation: volar3 12s linear infinite;
animation: volar3 12s linear infinite;
}
.bird3 {
position: absolute;
-webkit-transform: scale(.4);
transform: scale(.4)
}
.bird7 {
position: absolute;
-webkit-transform: scale(.3);
transform: scale(.3)
}
.head {
position: absolute;
width: 25px;
height: 25px;
border-radius: 90px 90px 0;
background: #ddd;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
margin: 102px 291px
}
.ojo {
position: absolute;
width: 5px;
height: 5px;
border-radius: 100%;
background: black;
margin: 12px 14px
}
.boca {
position: absolute;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 7px solid #FFAE44;
border-bottom: 7px solid transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: 17px 21px
}
.body {
position: absolute;
width: 65px;
height: 150px;
border-bottom: 12px solid #ddd;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-radius: 90px / 100px;
margin: -30px 231px
}
.body::before {
content: "";
position: absolute;
width: 55px;
height: 30px;
border-radius: 0 0 70px 70px;
background: #ddd;
margin: 150px 0
}
.ala {
position: absolute;
width: 30px;
height: 50px;
background: #ddd;
border-radius: 0px 112px 0px 112px;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
margin: 80px 251px;
-webkit-animation: rotar 3s alternate infinite;
animation: rotar 3s alternate infinite;
}
.ala3 {
position: absolute;
width: 30px;
height: 50px;
background: #ccc;
border-radius: 0px 112px 0px 112px;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
margin: 80px 241px;
-webkit-animation: rotar 3s alternate infinite;
animation: rotar 3s alternate infinite;
}
.cola {
position: absolute;
width: 30px;
height: 30px;
border-radius: 0px 70px 0px 70px;
background: #ddd;
margin: 90px 221px;
-webkit-transform: rotate(-12deg);
transform: rotate(-12deg)
}
.cola::before {
content: "";
position: absolute;
width: 30px;
height: 30px;
border-radius: 0px 70px 0px 70px;
background: #ddd;
margin: 0px 3px;
-webkit-transform: rotate(50deg);
transform: rotate(50deg)
}
.cola::after {
content: "";
position: absolute;
width: 30px;
height: 30px;
border-radius: 0px 70px 0px 70px;
background: #ddd;
margin: 12px -3px;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg)
}
.arena {
position: absolute;
width: 800px;
height: 201px;
background: #DDC58B;
margin: 400px 0px;
}
.arena::before {
content: "";
position: absolute;
width: 300px;
height: 152px;
border-radius: 300px 300px 0 0;
background: #DDC58B;
margin: -21px -112px;
}
.arena::after {
content: "";
position: absolute;
width: 300px;
height: 152px;
border-radius: 300px 300px 0 0;
background: #DDC58B;
margin: -12px 50px;
}
.arena3 {
position: absolute;
width: 300px;
height: 152px;
border-radius: 300px 300px 0 0;
background: #DDC58B;
margin: -21px 212px;
}
.arena3::before {
content: "";
position: absolute;
width: 300px;
height: 152px;
border-radius: 300px 300px 0 0;
background: #DDC58B;
margin: 9px 152px;
}
.arena3::after {
content: "";
position: absolute;
width: 300px;
height: 152px;
border-radius: 300px 300px 0 0;
background: #DDC58B;
margin: 3px 261px;
}
.arenas {
position: absolute;
width: 300px;
height: 152px;
border-radius: 300px 300px 0 0;
background: #DDC58B;
margin: 7px 412px;
}
.sea {
position: absolute;
width: 800px;
height: 152px;
background: rgb(70, 180, 214);
background: -webkit-linear-gradient(top, rgba(70, 180, 214, 1) 0%, rgba(168, 221, 237, 1) 100%);
background: linear-gradient(to bottom, rgba(70, 180, 214, 1) 0%, rgba(168, 221, 237, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#46b4d6', endColorstr='#a8dded', GradientType=0);
margin: 271px 0px;
}
.so {
position: absolute;
width: 0;
height: 0;
border-left: 152px solid transparent;
border-right: 152px solid transparent;
border-bottom: 90px solid #FF6DB6;
margin: -192px 258px;
z-index: 999;
}
.so3 {
position: absolute;
width: 9px;
height: 251px;
background: white;
border-right: 5px solid #eaeaea;
margin: -112px 374px
}
.so3::before {
content: "";
position: absolute;
width: 21px;
height: 21px;
border-radius: 100%;
background: white;
border-right: 3px solid #eaeaea;
margin: -100px -5px
}
@-webkit-keyframes rotar {
0% {
-webkit-transform: rotatez(0deg) rotatey(0deg);
transform: rotatez(0deg) rotatey(0deg)
}
100% {
-webkit-transform: rotatez(132deg) rotatey(152deg);
transform: rotatez(132deg) rotatey(152deg)
}
}
@keyframes rotar {
0% {
-webkit-transform: rotatez(0deg) rotatey(0deg);
transform: rotatez(0deg) rotatey(0deg)
}
100% {
-webkit-transform: rotatez(132deg) rotatey(152deg);
transform: rotatez(132deg) rotatey(152deg)
}
}
@-webkit-keyframes volar {
0% {
-webkit-transform: translatex(-30px) translatey(0px);
transform: translatex(-30px) translatey(0px)
}
25% {
-webkit-transform: translatex(231px) translatey(12px);
transform: translatex(231px) translatey(12px)
}
30% {
-webkit-transform: translatex(300px) translatey(-30px);
transform: translatex(300px) translatey(-30px)
}
40% {
-webkit-transform: translatex(400px) translatey(12px);
transform: translatex(400px) translatey(12px)
}
50% {
-webkit-transform: translatex(500px) translatey(-21px);
transform: translatex(500px) translatey(-21px)
}
60% {
-webkit-transform: translatex(600px) translatey(21px);
transform: translatex(600px) translatey(21px)
}
70% {
-webkit-transform: translatex(700px) translatey(0px);
transform: translatex(700px) translatey(0px)
}
80% {
-webkit-transform: translatex(800px) translatey(-9px);
transform: translatex(800px) translatey(-9px)
}
90% {
-webkit-transform: translatex(900px) translatey(9px);
transform: translatex(900px) translatey(9px)
}
100% {
-webkit-transform: translatex(1052px) translatey(0px);
transform: translatex(1052px) translatey(0px)
}
}
@keyframes volar {
0% {
-webkit-transform: translatex(-30px) translatey(0px);
transform: translatex(-30px) translatey(0px)
}
25% {
-webkit-transform: translatex(231px) translatey(12px);
transform: translatex(231px) translatey(12px)
}
30% {
-webkit-transform: translatex(300px) translatey(-30px);
transform: translatex(300px) translatey(-30px)
}
40% {
-webkit-transform: translatex(400px) translatey(12px);
transform: translatex(400px) translatey(12px)
}
50% {
-webkit-transform: translatex(500px) translatey(-21px);
transform: translatex(500px) translatey(-21px)
}
60% {
-webkit-transform: translatex(600px) translatey(21px);
transform: translatex(600px) translatey(21px)
}
70% {
-webkit-transform: translatex(700px) translatey(0px);
transform: translatex(700px) translatey(0px)
}
80% {
-webkit-transform: translatex(800px) translatey(-9px);
transform: translatex(800px) translatey(-9px)
}
90% {
-webkit-transform: translatex(900px) translatey(9px);
transform: translatex(900px) translatey(9px)
}
100% {
-webkit-transform: translatex(1052px) translatey(0px);
transform: translatex(1052px) translatey(0px)
}
}
@-webkit-keyframes volar3 {
0% {
-webkit-transform: translatex(-30px) translatey(0px);
transform: translatex(-30px) translatey(0px)
}
25% {
-webkit-transform: translatex(321px) translatey(-30px);
transform: translatex(321px) translatey(-30px)
}
30% {
-webkit-transform: translatex(400px) translatey(30px);
transform: translatex(400px) translatey(30px)
}
40% {
-webkit-transform: translatex(450px) translatey(-12px);
transform: translatex(450px) translatey(-12px)
}
50% {
-webkit-transform: translatex(550px) translatey(33px);
transform: translatex(550px) translatey(33px)
}
60% {
-webkit-transform: translatex(630px) translatey(-33px);
transform: translatex(630px) translatey(-33px)
}
70% {
-webkit-transform: translatex(750px) translatey(9px);
transform: translatex(750px) translatey(9px)
}
80% {
-webkit-transform: translatex(850px) translatey(33px);
transform: translatex(850px) translatey(33px)
}
90% {
-webkit-transform: translatex(930px) translatey(-33px);
transform: translatex(930px) translatey(-33px)
}
100% {
-webkit-transform: translatex(1052px) translatey(-9px);
transform: translatex(1052px) translatey(-9px)
}
}
@keyframes volar3 {
0% {
-webkit-transform: translatex(-30px) translatey(0px);
transform: translatex(-30px) translatey(0px)
}
25% {
-webkit-transform: translatex(321px) translatey(-30px);
transform: translatex(321px) translatey(-30px)
}
30% {
-webkit-transform: translatex(400px) translatey(30px);
transform: translatex(400px) translatey(30px)
}
40% {
-webkit-transform: translatex(450px) translatey(-12px);
transform: translatex(450px) translatey(-12px)
}
50% {
-webkit-transform: translatex(550px) translatey(33px);
transform: translatex(550px) translatey(33px)
}
60% {
-webkit-transform: translatex(630px) translatey(-33px);
transform: translatex(630px) translatey(-33px)
}
70% {
-webkit-transform: translatex(750px) translatey(9px);
transform: translatex(750px) translatey(9px)
}
80% {
-webkit-transform: translatex(850px) translatey(33px);
transform: translatex(850px) translatey(33px)
}
90% {
-webkit-transform: translatex(930px) translatey(-33px);
transform: translatex(930px) translatey(-33px)
}
100% {
-webkit-transform: translatex(1052px) translatey(-9px);
transform: translatex(1052px) translatey(-9px)
}
}
@-webkit-keyframes brillo {
0% {
opacity: 1
}
100% {
opacity: 0.3
}
}
@keyframes brillo {
0% {
opacity: 1
}
100% {
opacity: 0.3
}
}
@-webkit-keyframes brillo3 {
0% {
opacity: 0.3
}
100% {
opacity: 1
}
}
@keyframes brillo3 {
0% {
opacity: 0.3
}
100% {
opacity: 1
}
}
</style>
</head>
<body>
<div class="container">
<div class="sol"></div>
<div class="cerros">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
</div>
<div class="sea"></div>
<div class="lineas">
<span class="l1"></span>
<span class="l2"></span>
<span class="l3"></span>
<span class="l4"></span>
<span class="l5"></span>
<span class="l6"></span>
<span class="l7"></span>
<span class="l8"></span>
</div>
<div class="sol3"></div>
<div class="arena" </div>
<div class="arena3"><span class="arenas"></span>
</div>
<div class="arenas3"></div>
<div class="girl">
<div class="legs3"></div>
<div class="legs"></div>
<div class="body7"></div>
<div class="body3"></div>
<div class="brazos">
<div class="hands"></div>
</div>
<div class="brazos3">
<div class="hands3"></div>
</div>
<div class="hut"></div>
<div class="so3"></div>
</div>
<div class="bird5">
<div class="bird7">
<div class="head">
<div class="ojo"></div>
<div class="boca"></div>
</div>
<div class="ala3"></div>
<div class="body"></div>
<div class="ala"></div>
<div class="cola"></div>
</div>
</div>
<div class="bird">
<div class="bird3">
<div class="head">
<div class="ojo"></div>
<div class="boca"></div>
</div>
<div class="ala3"></div>
<div class="body"></div>
<div class="ala"></div>
<div class="cola"></div>
</div>
</div>
<div class="so"></div>
</div>
</body>
</html>
