web coverflow的html5 源码,使用CSS3实现Coverflow（封面流）效果

CSS

语言：

CSSSCSS

确定

body {

padding: 4em 0;

text-align: center;

background: #f1f1f1;

}

.coverflow {

width: 200px;

height: 200px;

display: inline-block;

position: relative;

}

.coverflow > * {

position: absolute;

top: 0;

left: 0;

width: 200px;

height: 200px;

animation: coverflow 8s ease both infinite;

}

.coverflow :nth-child(2) {

animation-delay: 1s;

}

.coverflow :nth-child(3) {

animation-delay: 2s;

}

.coverflow :nth-child(4) {

animation-delay: 3s;

}

.coverflow :nth-child(5) {

animation-delay: 4s;

}

.coverflow :nth-child(6) {

animation-delay: 5s;

}

.coverflow :nth-child(7) {

animation-delay: 6s;

}

.coverflow :nth-child(8) {

animation-delay: 7s;

}

.coverflow-item {

border-radius: 50%;

border: 5px solid white;

}

@keyframes coverflow {

0%, 5% {

opacity: 0;

transform: translate3d(190px, 0, 0) scale(0.6);

}

12.5%, 17.5% {

opacity: 0.2;

transform: translate3d(170px, 0, 0) scale(0.6);

}

25%, 30% {

opacity: 1;

transform: translate3d(0, 0, 0) scale(1);

}

37.5%, 42.5% {

opacity: 0.2;

transform: translate3d(-170px, 0, 0) scale(0.6);

}

0%, 50% {

opacity: 0;

transform: translate3d(-190px, 0, 0) scale(0.6);

}

100% {

opacity: 0;

transform: translate3d(-190px, 0, 0) scale(0.6);

}

}

/* NO-BEAUTIFY */