css 轮播图 动效,CSS3 简单的图片轮播（带镜头拉近动效）

CSS

语言：

CSSSCSS

确定

* {

margin: 0;

padding: 0;

}

.pic-wrapper {

position: absolute;

width: 100%;

height: 100%;

overflow: hidden;

}

figure {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: 0;

/*animation*/

animation: slideShow 24s linear infinite 0s;

-o-animation: slideShow 24s linear infinite 0s;

-moz-animation: slideShow 24s linear infinite 0s;

-webkit-animation: slideShow 24s linear infinite 0s;

}

.pic-1 {

opacity: 1;

background: url(/uploads/150401/0.jpg) no-repeat center center;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

.pic-2 {

animation-delay: 6s;

-o-animation-delay: 6s;

-moz--animation-delay: 6s;

-webkit-animation-delay: 6s;

background: url(/uploads/150401/1.jpg) no-repeat center center;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

.pic-3 {

animation-delay: 12s;

-o-animation-delay: 12s;

-moz--animation-delay: 12s;

-webkit-animation-delay: 12s;

background: url(/uploads/150401/2.jpg) no-repeat center center;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

.pic-4 {

animation-delay: 18s;

-o-animation-delay: 18s;

-moz--animation-delay: 18s;

-webkit-animation-delay: 18s;

background: url(/uploads/150401/3.jpg) no-repeat center center;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

/* keyframes*/

}

@keyframes slideShow {

0% {

opacity: 0;

transform: scale(1);

-ms-transform: scale(1);

}

5% {

opacity: 1;

}

25% {

opacity: 1;

}

30% {

opacity: 0;

transform: scale(1.1);

-ms-transform: scale(1.1);

}

100% {

opacity: 0;

transform: scale(1);

-ms-transformm: scale(1);

}

}

@-o-keyframes slideShow {

0% {

opacity: 0;

-o-transform: scale(1);

}

5% {

opacity: 1;

}

25% {

opacity: 1;

}

30% {

opacity: 0;

-o-transform: scale(1.1);

}

100% {

opacity: 0;

-o-transformm: scale(1);

}

}

@-moz-keyframes slideShow {

0% {

opacity: 0;

-moz-transform: scale(1);

}

5% {

opacity: 1;

}

25% {

opacity: 1;

}

30% {

opacity: 0;

-moz-transform: scale(1.1);

}

100% {

opacity: 0;

-moz-transformm: scale(1);

}

}

@-webkit-keyframes slideShow {

0% {

opacity: 0;

-webkit-transform: scale(1);

}

5% {

opacity: 1;

}

25% {

opacity: 1;

}

30% {

opacity: 0;

-webkit-transform: scale(1.1);

}

100% {

opacity: 0;

-webkit-transformm: scale(1);

}

}