css3 飘,CSS3 飘摇的小船

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

body {

background: -webkit-linear-gradient(45deg, #0daed2 0, #5bccfb 100%);

background: linear-gradient(45deg, #0daed2 0, #5bccfb 100%);

background-size: cover;

height: 100vh;

width: 100vw;

}

#frame {

position: relative;

height: 15em;

width: 15em;

background-color: lightblue;

border: 0.75em solid #864d18;

border-radius: 50%;

margin: 2em auto;

overflow: hidden;

z-index: 2;

}

#frame:after {

content: '';

height: 5em;

width: 5em;

background-color: rgba(255, 255, 0, 0.77);

display: block;

margin-top: -2em;

border-radius: 50%;

margin-left: 50%;

box-shadow: -4px 5px 31px yellow;

}

#wave {

background: -webkit-radial-gradient(#3b3b92 38%, #1269e6 100%);

background: radial-gradient(#3b3b92 38%, #1269e6 100%);

height: 23em;

width: 23em;

position: absolute;

border-radius: 8.15em;

bottom: -19em;

left: -5em;

-webkit-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

-webkit-animation: wave 5s linear infinite;

animation: wave 5s linear infinite;

}

#boat {

width: 7.5em;

height: 2.125em;

background: -webkit-linear-gradient(72deg, #457b96 29%, #62a6e4 100%);

background: linear-gradient(18deg, #457b96 29%, #62a6e4 100%);

position: absolute;

top: 8.5em;

margin-left: 3.75em;

margin-top: 0.25em;

left: -1em;

border-radius: 45%;

border-top-left-radius: 0.5em;

border-top-right-radius: 0.5em;

-webkit-transform: rotate(-4deg);

-ms-transform: rotate(-4deg);

transform: rotate(-4deg);

-webkit-animation: rockTheBoat 1.25s linear infinite;

animation: rockTheBoat 1.25s linear infinite;

z-index: 2;

border-bottom: 3px outset #6776bb;

}

#boat:before {

content: '';

display: block;

width: 0;

height: 0;

border-left: 2em solid transparent;

border-right: -0.25em solid transparent;

border-bottom: 4em solid #eaeaea;

position: absolute;

top: -4em;

left: 1.75em;

z-index: 1;

-webkit-transform: rotateY(500px);

transform: rotateY(500px);

}

#boat:after {

content: '';

display: block;

width: 0;

height: 0;

border-right: 2em solid transparent;

border-left: -0.25em solid transparent;

border-bottom: 4em solid #f5f0f0;

position: absolute;

top: -4em;

left: 3.875em;

z-index: 1;

}

@-webkit-keyframes wave {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes wave {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-webkit-keyframes rockTheBoat {

0% {

margin-top: 0.25em;

-webkit-transform: rotate(-4deg);

transform: rotate(-4deg);

}

40% {

-webkit-transform: rotate(8deg);

transform: rotate(8deg);

margin-top: -0.5em;

}

90% {

-webkit-transform: rotate(-4deg);

transform: rotate(-4deg);

margin-top: 0.25em;

}

}

@keyframes rockTheBoat {

0% {

margin-top: 0.25em;

-webkit-transform: rotate(-4deg);

transform: rotate(-4deg);

}

40% {

-webkit-transform: rotate(8deg);

transform: rotate(8deg);

margin-top: -0.5em;

}

90% {

-webkit-transform: rotate(-4deg);

transform: rotate(-4deg);

margin-top: 0.25em;

}

}