html绘制城堡,HTML5动画 - 山谷城堡

CSS

语言：

CSSSCSS

确定

html {

background: #215560;

}

.container {

margin: auto;

height: 300px;

width: 300px;

animation: fade-in 2.5s;

}

.moon {

height: 60px;

width: 60px;

background: white;

border-radius: 50%;

position: absolute;

float: left;

margin: 0 5%;

}

.orientation {

margin-top: 20%;

transform: rotateX(-23deg) rotateY(-133deg) translateY(115px) translateZ(230px);

transform-style: preserve-3d;

}

.towers > *,

.bridges > *,

.wall > *,

.top,

.ocean,

.basics,

.top:after,

.side:after,

.side,

.tower2:after,

.tower2-support:before,

.tower2-support:after,

.support-side:before,

.support-side:after,

.waterbridge1:before,

.waterbridge1:after,

.waterbridge2,

.waterbridge2:after,

.waterfall,

.bridge1,

.bridge1:after,

.bridge2,

.bridge2:after,

.block1:before,

.block2:before,

.block3:before,

.block1:after,

.block2:after,

.block3:after,

.block4:before,

.block4:after,

.bridge3:after,

.wall-right:after,

.wall-depth:after,

.stair1:after,

.stair3:after,

.stair2:after,

.base-wrapper {

position: absolute;

transform-style: preserve-3d;

content: "";

}

.top {

border-left: 13px solid transparent;

border-bottom: 23px solid #f5d2d8;

transform: translateY(-29px) translateZ(0px);

}

.top:after,

.side:after {

height: 15px;

width: 4px;

background-size: 6px 6px;

box-shadow: 1px 0px rgba(78, 40, 63, 0.3);

}

.top:after {

background: repeating-linear-gradient(#f0bdc6, #f0bdc6 3px, transparent 3px, transparent 6px), repeating-linear-gradient(to right, #f0bdc6, #f0bdc6 2px, #d6abc9 2px, #664a9f 2px, #664a9f 4px, transparent 8px);

transform: translateX(-6px) translateY(15px) rotateZ(-90deg) translateZ(-4px);

}

.side {

border-left: 10px solid transparent;

border-bottom: 20px solid #f5a1b8;

transform: translateY(-23px) translateZ(7px) rotateZ(-30deg);

}

.side:after {

background: repeating-linear-gradient(#f089a4, #f089a4 3px, transparent 3px, transparent 6px), repeating-linear-gradient(to right, #f089a4, #f089a4 2px, #d6abc9 2px, #664a9f 2px, #664a9f 4px, transparent 8px);

transform: translateX(-5px) rotatex(-20deg) translateY(13px) rotateZ(-91deg) translateZ(3px);

}

.tower1 .t1-front {

height: 270px;

width: 11px;

}

.tower1 .t1-side {

height: 270px;

width: 10px;

transform: translateX(10px) rotateY(-90deg) translateY(-273px) translateZ(-1px);

}

.tower2 .t2-front {

height: 90px;

width: 11px;

}

.tower2 .t2-side {

height: 90px;

width: 10px;

transform: translateX(10px) rotateY(-90deg) translateY(-93px) translateZ(-1px);

}

.tower3 .t3-front {

height: 54px;

width: 11px;

}

.tower3 .t3-side {

height: 54px;

width: 10px;

transform: translateX(10px) rotateY(-90deg) translateY(-57px) translateZ(-1px);

}

.tower1 {

transform: translateY(-25px) translateZ(-115px);

}

.tower1 .t1-front {

background: linear-gradient(#f5d2d8, #f5d2d8, #cea7c2, #c9bad1);

}

.tower2 {

transform: translateX(-205px) translateY(100px) translateZ(23px);

}

.tower2 .t2-front {

background: linear-gradient(#f5d2d8, #f5d2d8, #957b98);

}

.tower2:after {

height: 15px;

width: 5px;

background: linear-gradient(#8e4667, #6c354e);

border-radius: 30% 30% 0 0;

transform: translateX(3px) translateY(-129px);

}

.tower2-support:before {

height: 3px;

width: 14px;

background: #8575a3;

transform: translateX(-3px) rotateY(-5deg) translateY(-1px) translateZ(2px);

}

.tower2-support {

height: 25px;

width: 11px;

background: linear-gradient(#957b98, #d6abc9);

transform: translateX(-3px) translateY(75px) translateZ(-163px);

}

.tower2-support:after {

height: 25px;

width: 4px;

background: #c06e83;

transform: translateX(10px);

}

.tower3 {

transform: translateY(150px) translateZ(-50px);

}

.tower3 .t3-front {

background: linear-gradient(#f5d2d8, #f1bec5, #626a9b, #31519c);

}

.t1-side,

.t2-side,

.t3-side {

background: linear-gradient(#f2819f, #f2819f, #f2819f, #d15883, #d169a8);

}

.tower3-support {

height: 23px;

width: 6px;

background: #224996;

transform: translateX(204px) translateY(92px) translateZ(-236px);

}

.tower3-support .support-side {

height: 23px;

width: 6px;

background: linear-gradient(#bd4d99, #957b98);

transform: translateX(4px) translateZ(2px) rotateY(90deg);

}

.support-side:before {

height: 0px;

width: 9px;

border-top: 5px solid #1c47a5;

border-left: 4px solid transparent;

transform: translateX(-5px) translateY(-5px);

}

.support-side:after {

height: 0px;

width: 6px;

border-top: 5px solid #1c47a5;

border-right: 4px solid transparent;

border-left: 4px solide transparent;

transform: translateX(7px) translateY(-8px) rotateZ(-30deg) translateZ(-11px);

}

.window {

height: 16px;

width: 4px;

background: #5b2d42;

border-radius: 55% 55% 0 0;

float: top;

transform: translateX(3px) translateY(4px);

}

.waterbridge1:before {

height: 34px;

width: 5px;

background: #f2819f;

transform: translateX(46px) translateY(-4px) rotateY(90deg) translateZ(-52px);

}

.waterbridge1 {

height: 33px;

width: 8px;

background: linear-gradient(#f2819f, #ffa4b5, #ffa4b5, #f5d2d8);

transform: rotateX(-85deg) translateX(46px) translateY(133px) rotateZ(180deg) translateZ(40px);

}

.waterbridge1:after {

height: 25px;

width: 12px;

background: linear-gradient(-140deg, #f2819f, #f2819f, #0aa9fb, #0aa9fb, #0aa9fb, #06d7fe);

transform: translateX(-39px) translateY(-33px) translateZ(-30px);

}

.waterbridge2 {

height: 20px;

width: 8px;

background: linear-gradient(#f2819f, #f089a4);

transform: rotateX(-85deg) translateX(13px) translateY(113px) rotateZ(180deg) translateZ(55px);

}

.waterbridge2:after {

height: 18px;

width: 3px;

background: #e9537a;

transform: rotateY(90deg) translateZ(-3px);

}

.waterfall {

height: 100px;

width: 15px;

animation: water 4s ease-in-out 2s infinite normal;

background: linear-gradient(-140deg, #06d7fe, #0aa9fb, #0aa9fb, #66ffff, #0aa9fb, #0aa9fb, #0066ff, #66ffff);

background-size: 200px 300px;

transform: translateX(-66px) translateY(130px) translateZ(-20px);

}

.bridge1 {

height: 120px;

width: 11px;

background: #ffdddd;

transform: rotateX(-82deg) translateX(40px) translateY(160px) rotateZ(180deg) translateZ(80px);

}

.bridge1:after {

height: 4px;

width: 120px;

background: linear-gradient(to right, #f292ad, #f193ab, #cc71aa);

transform: translateY(55px) translateX(-63px) rotateY(90deg) rotateZ(-90deg);

}

.bridge2 {

height: 13px;

width: 67px;

background: linear-gradient(to left, #f5d2d8, #f66da5, #f5d2d8, #f5d2d8);

transform: translateX(-88px) rotateX(90deg) rotateZ(-5deg) translateY(-45px) translateZ(-172px);

}

.bridge2:after {

height: 4px;

width: 67px;

background: linear-gradient(to left, #f5d2d8, #606096, #d6abc9, #d6abc9, #d8adcb);

transform: rotateX(90deg) translateX(2px) translateZ(56px);

}

.block-wrapper {

transform: translateY(10px) translateX(0px) rotateZ(-3deg);

}

.block1 {

height: 12px;

width: 12px;

transform: translateX(-19px) translateY(-14px) rotateZ(5deg);

}

.block2 {

height: 12px;

width: 12px;

transform: translateX(-38px) translateY(-28px) rotateZ(5deg);

}

.block3 {

height: 12px;

width: 12px;

transform: translateX(-57px) translateY(-42px) rotateZ(5deg);

}

.block4 {

height: 17px;

width: 17px;

transform: translateX(-84px) translateY(-60px) rotateZ(5deg);

}

.block1,

.block2,

.block3,

.block4 {

background: #ffdeef;

position: relative;

}

.block1:before,

.block2:before,

.block3:before {

height: 12px;

width: 6px;

background: #f2819f;

transform: skewY(-40deg) translateY(8px) translateX(12px);

}

.block1:after,

.block2:after,

.block3:after {

height: 6px;

width: 12px;

background: #e4c3d6;

transform: skewX(-47deg) translateY(-5px) translateX(-2px);

}

.block4:before {

height: 17px;

width: 9px;

background: #f2819f;

transform: skewY(-40deg) translateY(11px) translateX(16px);

}

.block4:after {

height: 7px;

width: 17px;

background: #eca8b4;

transform: skewX(-47deg) translateY(-7px) translateX(-3px);

}

.bridge3 {

height: 40px;

width: 11px;

background: linear-gradient(-130deg, #f089a4, #f089a4, #f5d2d8, #f5d2d8, #f5d2d8, #f5d2d8, #f2819f);

transform: rotateX(-86deg) translateX(5px) translateY(140px) rotateZ(180deg) translateZ(-25px);

}

.bridge3:after {

height: 47px;

width: 4px;

background: #ed7293;

transform: translateX(-3px) rotateY(90deg) translateY(-6px);

}

.wall-left {

height: 200px;

width: 4px;

background: linear-gradient(#f3a8bc, #f089a4);

transform: translateX(-9px) translateY(45px) translateZ(-110px);

}

.wall-curve {

fill: #f3a8bc;

transform: translateX(-183px) translateY(116px) translateZ(19px);

}

.wall-right {

height: 140px;

width: 15px;

background: linear-gradient(to top, #dc98b0, #ec8ea9, #f3a8bc);

transform: translateX(-200px) translateY(146px) translateZ(24px);

}

.wall-right:after {

height: 150px;

width: 5px;

background: linear-gradient(#6755a7, #ba569e 10px, #ea85a3 20px);

transform: translateX(15px);

}

.wall-depth {

height: 50px;

width: 4px;

background: #ea85a3;

transform: translateY(140px) translateX(50px) translateZ(-196px);

}

.wall-depth:after {

height: 22px;

width: 6px;

background: repeating-linear-gradient(to right, #f089a4, #f089a4 3px, #ea5c81 3px, #ea5c81 6px);

transform: translateY(-27px) translateX(47px) translateZ(-56px);

}

.wall-top {

height: 5px;

width: 40px;

background: repeating-linear-gradient(to left, #f5d2d8, #f5d2d8 5px, transparent 5px, #d03e6d 10px);

transform: translateX(-40px) translateY(38px) translateZ(-116px) rotateX(90deg);

}

.stair1,

.stair3 {

background: repeating-linear-gradient(to bottom, #f5d2d8, #f5d2d8 2px, #f089a4 2px, #f486a3 3px);

height: 45px;

width: 12px;

transform: translateX(319px) translateZ(-479px) skewX(-30deg);

}

.stair1:after,

.stair3:after,

.stair3:after {

height: 45px;

width: 3px;

background: #d470ae;

transform: translateX(11px);

}

.stair2 {

background: repeating-linear-gradient(30deg, #ffb4ba, #ffb4ba 2px, #e95d8e 2px, #f486a3 3px);

height: 13px;

width: 25px;

transform: rotateX(94deg) translateY(-90px) translateZ(-152px) skewY(-35deg);

}

.stair2:after {

height: 4px;

width: 25px;

background: #e085ad;

transform: translateY(-4px);

}

.stair3 {

transform: translateX(38px) translateZ(-202px) skewX(-33deg) translateY(28px);

}

.ocean {

height: 200px;

width: 200px;

background: linear-gradient(#06d7fe, #08b3f9);

margin: auto;

transform: rotateX(97deg) rotateZ(-3deg) translateX(-330px) translateY(70px) translateZ(-260px);

}

.ripple-wrapper {

transform: translateX(30px) translateY(105px);

}

.rip1 {

border: 4px solid white;

height: 65px;

width: 65px;

animation: ripple-effect 2.2s ease-in infinite, fade-in 2.2s ease-in infinite reverse;

}

.rip2 {

border: 4px solid white;

height: 55px;

width: 55px;

animation: ripple-effect 2s ease-in infinite .5s;

}

.base-wrapper {

transform: rotateY(90deg) rotateX(45deg) translateX(-3px) translateZ(20px) translateY(90px);

}

.square:nth-of-type(1n) {

height: 7px;

width: 7px;

animation: base 1s ease-in infinite alternate 1s;

background: white;

}

.square:nth-of-type(2n) {

height: 7px;

width: 7px;

animation: base 1s ease-in infinite alternate 2s;

background: white;

}

.square:nth-of-type(3n) {

height: 7px;

width: 7px;

animation: base 1s ease-in infinite alternate 0.5s;

background: white;

}

.square:nth-of-type(4n) {

height: 7px;

width: 7px;

animation: base 1s ease-in infinite alternate 1s;

background: white;

}

@keyframes fade-in {

0% {

opacity: 0;

}

100% {

opacity: 1;

}

}

@keyframes water {

0% {

background-position: 0% 50%;

}

50% {

background-position: 75% 50%;

}

100% {

background-position: 100% 50%;

}

}

@keyframes ripple-effect {

0% {

opacity: 100%;

transform: scale(0.4);

}

100% {

opacity: 0%;

transform: scale(1);

}

}

@keyframes base {

0% {

transform: scale(0.5);

}

100% {

transform: scale(1.2);

}

}