css摇曳的_使用CSS3构造的海上坐船摇晃动画效果

CSS

语言：

CSSSCSS

确定

body {

background-color: #09f;

color: #003;

font-family: 'Rye', serif;

font-size: calc(9px + 1vw);

overflow: hidden;

position: relative;

}

body:before {

animation: rock15 5s ease-in-out alternate infinite;

background-image: linear-gradient(#09f, #fff 50%, #06c 50%, #09f);

content: "";

height: 200%;

left: -50%;

position: absolute;

top: -50%;

transform-origin: center;

width: 200%;

z-index: -1;

}

article {

/* animation:slide 10s ease-in-out infinite; */

background-color: #fff;

border-radius: .25em;

box-sizing: border-box;

height: 50vh;

margin: 25vh 25vw;

opacity: .95;

padding: 1em;

width: 50vw;

}

header {

animation: rock3 5s ease-in-out alternate infinite;

border-bottom: solid 1px currentColor;

text-align: center;

}

h2 {

animation: slide 10s ease-in-out infinite;

background-color: #a60;

/* box-shadow:0.25em .25em .25em rgba(0,0,0,.5); */

color: #fff;

display: inline-block;

margin: 0;

padding: .25em .5em;

}

.seasick {

color: #990;

font-family: 'Chewy', cursive;

font-size: 1.1em;

}

@keyframes rock15 {

0% {

transform: rotate(15deg);

}

100% {

transform: rotate(-15deg);

}

}

@keyframes rock3 {

0% {

transform: rotate(3deg);

}

100% {

transform: rotate(-3deg);

}

}

@keyframes slide {

0% {

box-shadow: 0.25em .25em .25em rgba(0, 0, 0, .25);

transform: translateX(10vw);

}

25% {

transform: translateX(10vw);

}

50% {

box-shadow: -0.25em .25em .25em rgba(0, 0, 0, .25);

transform: translateX(-10vw);

}

75% {

transform: translateX(-10vw);

}

100% {

box-shadow: 0.25em .25em .25em rgba(0, 0, 0, .25);

transform: translateX(10vw);

}

}