<!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;
-web
