CSS
语言:
CSSSCSS
确定
body {
background: black;
}
.container {
position: relative;
width: 800px;
height: 600px;
background: #121212;
margin: 132px auto;
}
ul {
position: absolute;
width: 900px;
height: 500px;
list-style: none;
margin: 60px auto;
}
ul li {
width: 212px;
height: 212px;
display: inline-block;
margin-left: 90px;
overflow: hidden;
position: relative;
border: 6px solid white;
transform: scale(.9)
}
ul li:nth-child(1) {
background: #004058;
}
.sky {
position: absolute;
width: 212px;
height: 102px;
background: #132E3A;
}
.sky::before {
content: "";
display: block;
width: 30px;
height: 30px;
border-radius: 100%;
background: white;
margin: 60px 21px;
}
.acantilado {
position: absolute;
width: 132px;
height: 50px;
background: #00a07b;
margin: 95px 90px;
border-radius: 70px 0 0 0;
}
.acantilado::before {
content: "";
display: block;
width: 1232px;
height: 30px;
background: #006864;
margin: 30px -30px;
border-radius: 70px 0 0 0;
}
.faro {
position: absolute;
border-bottom: 50px solid #ccc;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
height: 0;
width: 9px;
margin: 45px 132px;
}
.faro::before {
content: "";
display: block;
width: 17px;
height: 3px;
background: #ff340f;
margin: 0px -3px;
}
.faro::after {
content: "";
display: block;
width: 13px;
height: 9px;
background: #ff340f;
margin: -9px -1px;
}
.far {
position: absolute;
width: 0;
height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-bottom: 9px solid #ff340f;
margin: -19px -3px;
}
.far::before {
content: "";
display: block;
width: 8px;
height: 7px;
background: yellow;
margin: 9px -5px;
}
.far::after {
content: "";
display: block;
border-bottom: 90px solid rgba(255, 255, 255, .3);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
height: 0;
width: 9px;
transform: rotate(90deg);
margin: -57px -63px;
}
ul li:nth-child(2) {
background: #00b69c;
}
.sky3 {
position: absolute;
width: 212px;
height: 102px;
background: #7deeea;
}
.sky3::before {
content: "";
display: block;
width: 35px;
height: 35px;
border-radius: 100%;
background: #FFEAA0;
margin: 21px 90px;
}
.acantilado3 {
position: absolute;
width: 90px;
height: 90px;
background: #00a07b;
margin: 60px 0px;
border-radius: 0px 30px 0 0;
}
.acantilado3::before {
content: "";
display: block;
width: 90px;
height: 90px;
background: #00a07b;
margin: 0px 123px;
border-radius: 30px 0px 0 0;
}
.acantilado3::after {
content: "";
display: block;
width: 33px;
height: 70px;
background: white;
margin: -60px 90px;
}
.cascada {
position: absolute;
width: 9px;
height: 70px;
background: #eee;
margin: 90px 90px;
}
.cascada::before {
content: "";
display: block;
width: 3px;
height: 60px;
background: #eee;
margin: 9px 14px;
}
.cascada::after {
content: "";
display: block;
width: 9px;
height: 50px;
background: #eee;
margin: -73px 23px;
}
.espuma {
position: absolute;
width: 50px;
height: 12px;
border-radius: 100%;
background: rgba(255, 255, 255, .3);
margin: -9px;
}
.espuma::before {
content: "";
display: block;
width: 80px;
height: 95px;
background: #006864;
border-radius: 50px 50px 0 0;
margin: -33px -90px;
}
.espuma::after {
content: "";
display: block;
width: 80px;
height: 40px;
background: #006864;
border-radius: 50px 50px 0 0;
margin: -90px 70px;
}
ul li:nth-child(3) {
background: #ff9663;
}
.mountains {
position: absolute;
width: 0;
height: 0;
border-left: 192px solid transparent;
border-right: 192px solid transparent;
border-bottom: 300px solid #00a07b;
margin: 70px -132px;
z-index: 3;
}
.mountains::before {
content: "";
display: block;
width: 0;
height: 0;
border-left: 192px solid transparent;
border-right: 162px solid transparent;
border-bottom: 212px solid #00a07b;
margin: 35px -98px
}
.sol {
position: absolute;
width: 90px;
height: 70px;
border-radius: 100%;
background: #ff5030;
margin: 90px 70px;
}
.mount {
position: absolute;
width: 0;
height: 0;
border-left: 121px solid transparent;
border-right: 121px solid transparent;
border-bottom: 212px solid #006864;
margin: 70px -65px;
z-index: 3;
}
.mount::before {
content: "";
display: block;
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 121px solid transparent;
border-bottom: 212px solid #00a07b;
margin: 50px -45px;
z-index: 3;
}
.mount::after {
content: "";
display: block;
width: 0;
height: 0;
border-left: 121px solid transparent;
border-right: 112px solid transparent;
border-bottom: 121px solid #006864;
margin: -271px -30px;
z-index: 3;
}
.nubes {
position: absolute;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, .8);
;
border-radius: 100%;
margin: 21px 121px;
}
.nubes::before {
content: "";
display: block;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, .7);
border-radius: 100%;
margin: 9px 16px;
}
.nubes::after {
content: "";
display: block;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, .7);
border-radius: 100%;
margin: -35px -9px;
}
ul li:nth-child(4) {
background: #ccc;
}
.sol3 {
position: absolute;
width: 231px;
height: 121px;
background: #ffa000;
margin: 121px 0px;
}
.sol3::before {
content: "";
display: block;
width: 35px;
height: 35px;
border-radius: 100%;
background: #ED885A;
margin: -90px 30px;
}
.acant {
position: absolute;
width: 30px;
height: 12px;
background: #ff9500;
margin: 112px 53px;
}
.acant::before {
content: "";
display: block;
border-bottom: 30px solid #ff8a00;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
height: 0;
width: 30px;
margin: -19px 12px;
}
.acant::after {
content: "";
display: block;
width: 30px;
height: 30px;
background: #ff8a00;
margin: 112px 21px;
margin: -40px 50px;
}
.acanti {
position: absolute;
width: 60px;
height: 21px;
background: #ff8a00;
margin: 102px 121px;
}
.acanti::before {
content: "";
display: block;
border-bottom: 30px solid #ff8a00;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
height: 0;
width: 30px;
margin: -9px -21px;
}
.acanti::after {
content: "";
display: block;
width: 50px;
height: 12px;
background: #ff8a00;
margin: -30px -0px;
}
.cactus {
position: absolute;
width: 9px;
height: 60px;
background: #00a380;
border-radius: 6px;
margin: 121px 95px;
}
.cactus::before {
content: "";
display: block;
width: 21px;
height: 6px;
background: #00a380;
border-radius: 3px;
margin: 21px -21px;
}
.cactus::after {
content: "";
display: block;
width: 6px;
height: 21px;
background: #00a380;
border-radius: 3px;
margin: -45px -21px;
}
.cact {
position: absolute;
width: 21px;
height: 6px;
background: #00a380;
border-radius: 3px;
margin: -12px 9px;
}
.cact::before {
content: "";
display: block;
width: 6px;
height: 21px;
background: #00a380;
border-radius: 3px;
margin: -16px 16px;
}