css作品,4幅CSS3构建的油画作品

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;

}