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)

}

}