HTML页面放个会动的风铃,HTML5 串联在一起摇晃的卡片（风铃）

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Roboto+Mono:700);

*,

*:before,

*:after {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html,

body {

width: 100%;

height: 100%;

}

body {

font-family: 'Roboto Mono', monospace;

background-color: black;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-perspective: 100rem;

perspective: 100rem;

-webkit-perspective-origin: 50% 50%;

perspective-origin: 50% 50%;

}

.veryImportantLink {

position: absolute;

top: 10px;

right: 10px;

font-size: 14px;

color: white;

text-decoration: none;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

opacity: 0.5;

-webkit-transition: opacity 0.25s;

transition: opacity 0.25s;

}

.veryImportantLink:hover,

.veryImportantLink:active,

.veryImportantLink:focus {

opacity: 1;

}

.box {

position: relative;

top: 5vh;

width: 20vw;

height: 60vw;

margin: 0 auto;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transform: translateZ(-50vw);

transform: translateZ(-50vw);

}

.cards {

position: relative;

display: block;

width: 100%;

height: 100%;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transform: rotateY(45deg);

transform: rotateY(45deg);

-webkit-animation: turn 30s infinite linear;

animation: turn 30s infinite linear;

}

.card,

.card:before {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

}

.card {

font-size: 0;

color: transparent;

}

.card:before {

content: attr(title);

padding-top: 150%;

text-align: center;

font-size: 25vw;

color: black;

text-transform: uppercase;

background-color: white;

box-shadow: 0 0 10vw rgba(0, 0, 0, 0.5);

-webkit-transform-origin: 50% 10%;

-ms-transform-origin: 50% 10%;

transform-origin: 50% 10%;

-webkit-transform: rotateZ(45deg);

transform: rotateZ(45deg);

-webkit-animation-name: swing;

animation-name: swing;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

-webkit-animation-timing-function: cubic-bezier(0.385, 0.23, 0.22, 1.18);

animation-timing-function: cubic-bezier(0.385, 0.23, 0.22, 1.18);

}

.card:nth-child(even):before {

-webkit-animation-direction: reverse;

animation-direction: reverse;

}

.card:nth-child(1) {

z-index: 7;

-webkit-transform: translateZ(-3vw);

transform: translateZ(-3vw);

}

.card:nth-child(1):before {

-webkit-animation-duration: 4s;

animation-duration: 4s;

-webkit-animation-delay: -2.8s;

animation-delay: -2.8s;

}

.card:nth-child(2) {

z-index: 6;

-webkit-transform: translateZ(-6vw);

transform: translateZ(-6vw);

}

.card:nth-child(2):before {

-webkit-animation-duration: 3.6s;

animation-duration: 3.6s;

-webkit-animation-delay: -3s;

animation-delay: -3s;

}

.card:nth-child(3) {

z-index: 5;

-webkit-transform: translateZ(-9vw);

transform: translateZ(-9vw);

}

.card:nth-child(3):before {

-webkit-animation-duration: 3.9s;

animation-duration: 3.9s;

-webkit-animation-delay: -1.2s;

animation-delay: -1.2s;

}

.card:nth-child(4) {

z-index: 4;

-webkit-transform: translateZ(-12vw);

transform: translateZ(-12vw);

}

.card:nth-child(4):before {

-webkit-animation-duration: 3.5s;

animation-duration: 3.5s;

-webkit-animation-delay: -3.2s;

animation-delay: -3.2s;

}

.card:nth-child(5) {

z-index: 3;

-webkit-transform: translateZ(-15vw);

transform: translateZ(-15vw);

}

.card:nth-child(5):before {

-webkit-animation-duration: 3.6s;

animation-duration: 3.6s;

-webkit-animation-delay: -2.2s;

animation-delay: -2.2s;

}

.card:nth-child(6) {

z-index: 2;

-webkit-transform: translateZ(-18vw);

transform: translateZ(-18vw);

}

.card:nth-child(6):before {

-webkit-animation-duration: 3.6s;

animation-duration: 3.6s;

-webkit-animation-delay: -1.4s;

animation-delay: -1.4s;

}

.card:nth-child(7) {

z-index: 1;

-webkit-transform: translateZ(-21vw);

transform: translateZ(-21vw);

}

.card:nth-child(7):before {

-webkit-animation-duration: 3.3s;

animation-duration: 3.3s;

-webkit-animation-delay: -1s;

animation-delay: -1s;

}

@-webkit-keyframes turn {

50% {

-webkit-transform: rotateY(-45deg);

transform: rotateY(-45deg);

}

}

@keyframes turn {

50% {

-webkit-transform: rotateY(-45deg);

transform: rotateY(-45deg);

}

}

@-webkit-keyframes swing {

50% {

-webkit-transform: rotateZ(-45deg);

transform: rotateZ(-45deg);

}

}

@keyframes swing {

50% {

-webkit-transform: rotateZ(-45deg);

transform: rotateZ(-45deg);

}

}