html5 风景,HTML5/CSS3风景画 - 湖畔别墅
CSS
语言：
CSSSCSS
确定
body {
background: black;
}
.sol {
position: absolute;
width: 90px;
height: 90px;
border-radius: 100%;
background: #F4B369;
margin: 21px 152px
}
.container {
position: relative;
width: 400px;
height: 300px;
background: rgb(100, 171, 229);
background: -webkit-linear-gradient(top, rgba(100, 171, 229, 1) 0%, rgba(206, 163, 182, 1) 50%);
background: linear-gradient(to bottom, rgba(100, 171, 229, 1) 0%, rgba(206, 163, 182, 1) 50%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#64abe5', endColorstr='#cea3b6', GradientType=0);
border: 7px solid #ddd;
margin: 231px auto;
overflow: hidden;
}
.casa {
position: absolute;
width: 60px;
height: 40px;
background: #ccc;
border-top: 3px solid #b5bdc8;
margin: 132px 172px
}
.casa::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 40px solid #ccc;
margin: -43px 0
}
.techo {
position: absolute;
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 50px solid #D35873;
margin: 83px 162px
}
.ventanita {
position: absolute;
width: 16px;
height: 16px;
border-radius: 100%;
background: #B4DCEA;
border: 1px solid #333;
margin: -30px 21px
}
.ventanita::before {
content: "";
display: block;
width: 1px;
height: 16px;
background: #333;
margin: 0 7px
}
.ventanita::after {
content: "";
display: block;
width: 16px;
height: 1px;
background: #333;
margin: -8px 0px
}
.ventana,
.ventana3 {
position: absolute;
width: 12px;
height: 12px;
background: #B4DCEA;
border: 1px solid #333;
}
.ventana {
margin: 5px 7px
}
.ventana3 {
margin: 5px 35px
}
.ventana::before,
.ventana3::before {
content: "";
position: absolute;
width: 1px;
height: 12px;
background: #333;
margin: 0 6px
}
.door {
position: absolute;
width: 17px;
height: 21px;
background: #ddd;
border: 1px solid #333;
margin: 23px 19px
}
.door::before {
content: "";
position: absolute;
width: 5px;
height: 5px;
border-radius: 100%;
background: #333;
margin: 7px 9px
}
.lake {
position: absolute;
margin: 7px 0;
}
.grass {
position: absolute;
width: 400px;
height: 21px;
background: #994530;
margin: 162px 0
}
.r1,
.r2 {
position: absolute;
width: 25px;
height: 21px;
border-radius: 100%;
background: #682501;
}
.r1 {
margin: 162px 152px
}
.r2 {
margin: 162px 221px
}
.r1::before,
.r2::before {
content: "";
position: absolute;
width: 25px;
height: 21px;
border-radius: 100%;
background: #8E6A4A;
}
.r1::before {
margin: -3px -12px
}
.r2::before {
margin: -3px 12px
}
.r1::after,
.r2::after {
content: "";
position: absolute;
width: 25px;
height: 21px;
border-radius: 100%;
background: #682501;
}
.r1::after {
margin: 3px -21px
}
.r2::after {
margin: 3px 21px
}
ul.cerros {
position: absolute;
width: 500px;
height: 231px;
list-style: none;
margin: 50px -50px
}
ul.cerros li {
display: inline-block;
width: 0;
height: 0;
}
ul.cerros li:nth-child(1) {
border-left: 90px solid transparent;
border-right: 90px solid transparent;
border-bottom: 112px solid #25514e;
margin-left: -21px
}
ul.cerros li:nth-child(2) {
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 90px solid #25514e;
margin-left: -75px
}
ul.cerros li:nth-child(3) {
border-left: 90px solid transparent;
border-right: 90px solid transparent;
border-bottom: 112px solid #25514e;
margin-left: -112px
}
ul.cerros li:nth-child(4) {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 70px solid #25514e;
margin-left: -70px
}
ul.cerros li:nth-child(5) {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 90px solid #25514e;
margin-left: -70px
}
ul.cerros li:nth-child(6) {
border-left: 90px solid transparent;
border-right: 90px solid transparent;
border-bottom: 90px solid #25514e;
margin-left: -70px
}
ul.circ1,
ul.circ2,
ul.circ3,
ul.circ4,
ul.circ5 {
position: absolute;
list-style: none;
width: 450px;
height: 50px;
-webkit-animation: go 7s alternate infinite;
animation: go 7s alternate infinite;
}
ul.circ1 {
margin: 155px -47px;
}
ul.circ2 {
margin: 162px -47px;
}
ul.circ3 {
margin: 170px -47px;
}
ul.circ4 {
margin: 179px -47px;
}
ul.circ5 {
margin: 187px -47px;
}
ul.circ1 li,
ul.circ2 li,
ul.circ3 li,
ul.circ4 li,
ul.circ5 li {
display: inline-block;
width: 35px;
height: 35px;
border-radius: 45%;
}
ul.circ1 li:nth-child(1),
ul.circ2 li:nth-child(2),
ul.circ3 li:nth-child(1),
ul.circ4 li:nth-child(2),
ul.circ5 li:nth-child(1) {
background: rgba(140, 192, 234, .9);
margin: 3px 0;
-webkit-animation: rot 3s linear infinite;
animation: rot 3s linear infinite;
}
ul.circ1 li:nth-child(2),
ul.circ2 li:nth-child(1),
ul.circ3 li:nth-child(2),
ul.circ4 li:nth-child(1),
ul.circ5 li:nth-child(2) {
background: rgba(140, 192, 234, .7);
margin: 5px -7px;
-webkit-animation: rot3 2.1s linear infinite;
animation: rot3 2.1s linear infinite;
}
ul.circ1 li:nth-child(3),
ul.circ2 li:nth-child(4),
ul.circ3 li:nth-child(3),
ul.circ4 li:nth-child(4),
ul.circ5 li:nth-child(3) {
background: rgba(140, 192, 234, .9);
margin: 3px -3px;
-webkit-animation: rot 2.1s linear infinite;
animation: rot 2.1s linear infinite;
}
ul.circ1 li:nth-child(4),
ul.circ2 li:nth-child(3),
ul.circ3 li:nth-child(4),
ul.circ4 li:nth-child(3),
ul.circ5 li:nth-child(4) {
background: rgba(140, 192, 234, .5);
margin: 5px -7px;
-webkit-animation: rot3 2.1s linear infinite;
animation: rot3 2.1s linear infinite;
}
ul.circ1 li:nth-child(5),
ul.circ2 li:nth-child(6),
ul.circ3 li:nth-child(5),
ul.circ4 li:nth-child(6),
ul.circ5 li:nth-child(5) {
background: rgba(140, 192, 234, .9);
margin: 3px -3px;
-webkit-animation: rot 2.1s linear infinite;
animation: rot 2.1s linear infinite;
}
ul.circ1 li:nth-child(6),
ul.circ2 li:nth-child(5),
ul.circ3 li:nth-child(6),
ul.circ4 li:nth-child(5),
ul.circ5 li:nth-child(6) {
background: rgba(140, 192, 234, .5);
margin: 5px -7px;
-webkit-animation: rot3 2.1s linear infinite;
animation: rot3 2.1s linear infinite;
}
ul.circ1 li:nth-child(7),
ul.circ2 li:nth-child(8),
ul.circ3 li:nth-child(7),
ul.circ4 li:nth-child(8),
ul.circ5 li:nth-child(7) {
background: rgba(140, 192, 234, .9);
margin: 3px -3px;
-webkit-animation: rot 2.1s linear infinite;
animation: rot 2.1s linear infinite;
}
ul.circ1 li:nth-child(8),
ul.circ2 li:nth-child(7),
ul.circ3 li:nth-child(8),
ul.circ4 li:nth-child(7),
ul.circ5 li:nth-child(8) {
background: rgba(140, 192, 234, .7);
margin: 5px -7px;
-webkit-animation: rot3 2.1s linear infinite;
animation: rot3 2.1s linear infinite;
}
ul.circ1 li:nth-child(9),
ul.circ2 li:nth-child(10),
ul.circ3 li:nth-child(9),
ul.circ4 li:nth-child(10),
ul.circ5 li:nth-child(9) {
background: rgba(140, 192, 234, .9);
margin: 3px -3px;
-webkit-animation: rot3 2.1s linear infinite;
animation: rot3 2.1s linear infinite;
}
ul.circ1 li:nth-child(10),
ul.circ2 li:nth-child(9),
ul.circ3 li:nth-child(10),
ul.circ4 li:nth-child(9),
ul.circ5 li:nth-child(10) {
background: rgba(140, 192, 234, .5);
margin: 5px -7px;
-webkit-animation: rot3 2.1s linear infinite;
animation: rot3 2.1s linear infinite;
}
ul.circ1 li:nth-child(11),
ul.circ2 li:nth-child(12),
ul.circ3 li:nth-child(11),
ul.circ4 li:nth-child(12),
ul.circ5 li:nth-child(11) {
background: rgba(140, 192, 234, .7);
margin: 3px -3px;
-webkit-animation: rot3 2.1s linear infinite;
animation: rot3 2.1s linear infinite;
}
ul.circ1 li:nth-child(12),
ul.circ2 li:nth-child(11),
ul.circ3 li:nth-child(12),
ul.circ4 li:nth-child(11),
ul.circ5 li:nth-child(12) {
background: rgba(140, 192, 234, .5);
margin: 5px -7px;
-webkit-animation: rot3 2.1s linear infinite;
animation: rot3 2.1s linear infinite;
}
ul.circ1 li:nth-child(13),
ul.circ2 li:nth-child(14),
ul.circ3 li:nth-child(13),
ul.circ4 li:nth-child(14),
ul.circ5 li:nth-child(13) {
background: rgba(140, 192, 234, .9);
margin: 3px -3px;
-webkit-animation: rot3 2.1s linear infinite;
animation: rot3 2.1s linear infinite;
}
ul.circ1 li:nth-child(14),
ul.circ2 li:nth-child(13),
ul.circ3 li:nth-child(14),
ul.circ4 li:nth-child(13),
ul.circ5 li:nth-child(14) {
background: rgba(140, 192, 234, .7);
margin: 5px -7px;
-webkit-animation: rot3 2.1s linear infinite;
animation: rot3 2.1s linear infinite;
}
.agua1,
.agua2,
.agua3,
.agua4 {
position: absolute;
width: 400px;
height: 25px;
background: #4CBCDB;
}
.agua5 {
position: absolute;
width: 400px;
height: 90px;
border-top: 7px solid #379973;
background: #46C49C;
}
.agua1 {
margin: 172px 0
}
.agua2 {
margin: 182px 0
}
.agua3 {
margin: 192px 0
}
.agua4 {
margin: 225px 0
}
.agua5 {
margin: 212px 0
}
@-webkit-keyframes rot {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes rot {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@-webkit-keyframes rot3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg)
}
}
@keyframes rot3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
100% {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg)
}
}
@-webkit-keyframes go {
0% {
-webkit-transform: translatex(-3px);
transform: translatex(-3px)
}
100% {
-webkit-transform: translatex(3px);
transform: translatex(3px)
}
}
@keyframes go {
0% {
-webkit-transform: translatex(-3px);
transform: translatex(-3px)
}
100% {
-webkit-transform: translatex(3px);
transform: translatex(3px)
}
}