CSS

语言：

CSSSCSS

确定

body {

background: #acf0f2;

overflow: hidden;

}

.ocean {

background: #225378;

position: absolute;

height: 200vh;

bottom: -170%;

width: 100%;

}

blockquote {

font-family: inconsolata;

font-size: 1.2em;

line-height: 1.3em;

color: #acf0f2;

margin: 0 auto;

white-space: pre;

background: #1695a3;

width: 500px;

padding: 10px;

}

.container {

width: 500px;

margin: 0 auto;

margin-top: -85px;

}

.boat {

height: 50px;

width: 100px;

border-radius: 50% / 100%;

border-top-left-radius: 0;

border-top-right-radius: 0;

background: #eb7f00;

float: right;

margin-left: 20px;

-webkit-animation: bob 2s ease-in-out infinite alternate;

animation: bob 2s ease-in-out infinite alternate;

}

.boat:after {

content: '';

display: block;

width: 0;

height: 0;

border-style: solid;

border-width: 40px 0 0 40px;

margin: 0 auto;

position: relative;

bottom: 50px;

border-color: transparent transparent transparent crimson;

}

.boat--sinking {

float: wrong;

-webkit-animation-name: bob_and_rotate;

animation-name: bob_and_rotate;

opacity: 0.5;

}

@-webkit-keyframes bob {

0% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

100% {

-webkit-transform: translateY(20px);

transform: translateY(20px);

}

}

@keyframes bob {

0% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

100% {

-webkit-transform: translateY(20px);

transform: translateY(20px);

}

}

@-webkit-keyframes bob_and_rotate {

0% {

-webkit-transform: translateY(0) rotate(40deg);

transform: translateY(0) rotate(40deg);

}

100% {

-webkit-transform: translateY(10px) rotate(40deg);

transform: translateY(10px) rotate(40deg);

}

}

@keyframes bob_and_rotate {

0% {

-webkit-transform: translateY(0) rotate(40deg);

transform: translateY(0) rotate(40deg);

}

100% {

-webkit-transform: translateY(10px) rotate(40deg);

transform: translateY(10px) rotate(40deg);

}

}