海狼css7,纯CSS实现的海景 飞翔的海鸥 汹涌的海浪 蓝天白云

CSS

语言：

CSSSCSS

确定

body {

margin: 0;

overflow: hidden;

background: #7ec0ee;

}

.sea {

color: #006994;

background: -webkit-linear-gradient(bottom, currentColor 40%, transparent 40%);

background: linear-gradient(to top, currentColor 40%, transparent 40%);

white-space: nowrap;

overflow: hidden;

position: absolute;

left: 0;

bottom: 0;

}

.wave {

position: relative;

display: inline-block;

height: 100px;

width: 100px;

border-radius: 50% 0 0 50%;

box-shadow: 40px -70px 0 0 currentColor inset;

margin-right: -20px;

-webkit-animation: wave 4s infinite linear;

animation: wave 4s infinite linear;

}

@-webkit-keyframes wave {

50% {

-webkit-transform: translateX(-20%);

transform: translateX(-20%);

box-shadow: 30px -50px 0 0 currentColor inset;

top: 8px;

}

}

@keyframes wave {

50% {

-webkit-transform: translateX(-20%);

transform: translateX(-20%);

box-shadow: 30px -50px 0 0 currentColor inset;

top: 8px;

}

}

.wave:nth-child(1) {

-webkit-animation-delay: 0s;

animation-delay: 0s;

top: 0px;

}

.wave:nth-child(2) {

-webkit-animation-delay: -0.2s;

animation-delay: -0.2s;

top: 3px;

}

.wave:nth-child(3) {

-webkit-animation-delay: -0.4s;

animation-delay: -0.4s;

top: 6px;

}

.wave:nth-child(4) {

-webkit-animation-delay: 0s;

animation-delay: 0s;

top: 9px;

}

.wave:nth-child(5) {

-webkit-animation-delay: -0.2s;

animation-delay: -0.2s;

top: 0px;

}

.wave:nth-child(6) {

-webkit-animation-delay: -0.4s;

animation-delay: -0.4s;

top: 3px;

}

.wave:nth-child(7) {

-webkit-animation-delay: 0s;

animation-delay: 0s;

top: 6px;

}

.wave:nth-child(8) {

-webkit-animation-delay: -0.2s;

animation-delay: -0.2s;

top: 9px;

}

.wave:nth-child(9) {

-webkit-animation-delay: -0.4s;

animation-delay: -0.4s;

top: 0px;

}

.wave:nth-child(10) {

-webkit-animation-delay: 0s;

animation-delay: 0s;

top: 3px;

}

.wave:nth-child(11) {

-webkit-animation-delay: -0.2s;

animation-delay: -0.2s;

top: 6px;

}

.wave:nth-child(12) {

-webkit-animation-delay: -0.4s;

animation-delay: -0.4s;

top: 9px;

}

.wave:nth-child(13) {

-webkit-animation-delay: 0s;

animation-delay: 0s;

top: 0px;

}

.wave:nth-child(14) {

-webkit-animation-delay: -0.2s;

animation-delay: -0.2s;

top: 3px;

}

.wave:nth-child(15) {

-webkit-animation-delay: -0.4s;

animation-delay: -0.4s;

top: 6px;

}

.wave:nth-child(16) {

-webkit-animation-delay: 0s;

animation-delay: 0s;

top: 9px;

}

.wave:nth-child(17) {

-webkit-animation-delay: -0.2s;

animation-delay: -0.2s;

top: 0px;

}

.wave:nth-child(18) {

-webkit-animation-delay: -0.4s;

animation-delay: -0.4s;

top: 3px;

}

.wave:nth-child(19) {

-webkit-animation-delay: 0s;

animation-delay: 0s;

top: 6px;

}

.wave:nth-child(20) {

-webkit-animation-delay: -0.2s;

animation-delay: -0.2s;

top: 9px;

}

.bird {

position: absolute;

-webkit-animation: fly 8s infinite;

animation: fly 8s infinite;

}

.bird:nth-child(1) {

top: 20%;

left: 30%;

-webkit-animation-delay: 0s;

animation-delay: 0s;

-webkit-animation-duration: 5s;

animation-duration: 5s;

}

.bird:nth-child(2) {

top: 30%;

left: 40%;

-webkit-animation-delay: -5s;

animation-delay: -5s;

-webkit-animation-duration: 6s;

animation-duration: 6s;

}

.bird:nth-child(3) {

top: 40%;

left: 50%;

-webkit-animation-delay: -10s;

animation-delay: -10s;

-webkit-animation-duration: 7s;

animation-duration: 7s;

}

.bird:nth-child(4) {

top: 20%;

left: 60%;

-webkit-animation-delay: -6s;

animation-delay: -6s;

-webkit-animation-duration: 11s;

animation-duration: 11s;

}

.bird:nth-child(5) {

top: 30%;

left: 70%;

-webkit-animation-delay: -3s;

animation-delay: -3s;

-webkit-animation-duration: 12s;

animation-duration: 12s;

}

.bird:nth-child(6) {

top: 40%;

left: 30%;

-webkit-animation-delay: -8s;

animation-delay: -8s;

-webkit-animation-duration: 13s;

animation-duration: 13s;

}

.bird:nth-child(7) {

top: 20%;

left: 40%;

-webkit-animation-delay: -4s;

animation-delay: -4s;

-webkit-animation-duration: 17s;

animation-duration: 17s;

}

.bird:nth-child(8) {

top: 30%;

left: 50%;

-webkit-animation-delay: -9s;

animation-delay: -9s;

-webkit-animation-duration: 4s;

animation-duration: 4s;

}

.bird:nth-child(9) {

top: 40%;

left: 60%;

-webkit-animation-delay: -6s;

animation-delay: -6s;

-webkit-animation-duration: 5s;

animation-duration: 5s;

}

.bird:nth-child(10) {

top: 20%;

left: 70%;

-webkit-animation-delay: -2s;

animation-delay: -2s;

-webkit-animation-duration: 9s;

animation-duration: 9s;

}

.bird:before,

.bird:after {

content: '';

position: absolute;

height: 20px;

width: 20px;

top: 0;

box-shadow: 0 2px 0 0 #000 inset;

}

.bird:before {

left: -10px;

border-radius: 20% 40% 0 0;

-webkit-animation: fly-left 1s infinite;

animation: fly-left 1s infinite;

}

.bird:after {

left: 10px;

border-radius: 40% 20% 0 0;

-webkit-animation: fly-right 1s infinite linear;

animation: fly-right 1s infinite linear;

}

@-webkit-keyframes fly {

0%, 100% {

-webkit-transform: translate(-10px, -10px);

transform: translate(-10px, -10px);

}

30% {

-webkit-transform: translate(-5px, 5px);

transform: translate(-5px, 5px);

}

50% {

-webkit-transform: translate(10px, -5px);

transform: translate(10px, -5px);

}

80% {

-webkit-transform: translate(-5px, 5px);

transform: translate(-5px, 5px);

}

}

@keyframes fly {

0%, 100% {

-webkit-transform: translate(-10px, -10px);

transform: translate(-10px, -10px);

}

30% {

-webkit-transform: translate(-5px, 5px);

transform: translate(-5px, 5px);

}

50% {

-webkit-transform: translate(10px, -5px);

transform: translate(10px, -5px);

}

80% {

-webkit-transform: translate(-5px, 5px);

transform: translate(-5px, 5px);

}

}

@-webkit-keyframes fly-left {

50% {

border-radius: 50% 40% 0 0;

}

}

@keyframes fly-left {

50% {

border-radius: 50% 40% 0 0;

}

}

@-webkit-keyframes fly-right {

50% {

border-radius: 40% 50% 0 0;

}

}

@keyframes fly-right {

50% {

border-radius: 40% 50% 0 0;

}

}

.cloud {

position: absolute;

height: 50px;

width: 100px;

border-radius: 25px;

background: #fefaff;

margin: 50px;

-webkit-animation: cloud 150s infinite linear;

animation: cloud 150s infinite linear;

}

.cloud:nth-child(11) {

bottom: 10%;

right: 10%;

-webkit-animation-delay: 0s;

animation-delay: 0s;

-webkit-animation-duration: 60s;

animation-duration: 60s;

}

.cloud:nth-child(12) {

bottom: 22%;

right: 30%;

-webkit-animation-delay: -70s;

animation-delay: -70s;

-webkit-animation-duration: 74s;

animation-duration: 74s;

}

.cloud:nth-child(13) {

bottom: 34%;

right: 50%;

-webkit-animation-delay: -140s;

animation-delay: -140s;

-webkit-animation-duration: 88s;

animation-duration: 88s;

}

.cloud:nth-child(14) {

bottom: 85%;

right: 10%;

-webkit-animation-delay: -210s;

animation-delay: -210s;

-webkit-animation-duration: 60s;

animation-duration: 60s;

}

.cloud:nth-child(15) {

bottom: -3%;

right: 30%;

-webkit-animation-delay: 0s;

animation-delay: 0s;

-webkit-animation-duration: 74s;

animation-duration: 74s;

}

.cloud:before,

.cloud:after {

content: '';

position: absolute;

height: 60px;

width: 60px;

bottom: 0;

box-shadow: 0 2px 0 0 #7ec0ee inset;

background: inherit;

border-radius: 100%;

}

.cloud:before {

height: 80px;

width: 80px;

left: -20px;

}

.cloud:after {

right: 20px;

}

@-webkit-keyframes cloud {

0% {

-webkit-transform: translateX(100vw);

transform: translateX(100vw);

}

100% {

-webkit-transform: translateX(-100vw);

transform: translateX(-100vw);

}

}

@keyframes cloud {

0% {

-webkit-transform: translateX(100vw);

transform: translateX(100vw);

}

100% {

-webkit-transform: translateX(-100vw);

transform: translateX(-100vw);

}

}