Html
    Css
    Js

    
                        
.home-wrap {
	position:relative;
	height:300px;
}
.home-banner {
	position:absolute;
	width:500px;
	height:300px;
	overflow:hidden;
	perspective:300px;
}
@media only screen and (max-width:640px ) {
	.home-wrap {
	height:310px;
}
.home-banner {
	width:100%;
	height:300px;
	margin-left:0;
}
}.img-box {
	position:absolute;
	left:0;
	width:calc(100%*3);
	height:100%;
	transform-style:preserve-3d;
	transform:translateX(0);
}
.home-banner-img {
	position:absolute;
	width:calc(100%/3);
	height:100%;
	box-shadow:4px 5px 9px #333333;
	cursor:pointer;
}
.banner-img-two {
	transform:translateX(100%);
}
.banner-img-three {
	transform:translateX(200%);
}
@keyframes xz1-2 {
	0% {
	transform:rotateY(0) translateX(0)
}
50% {
	transform:rotateY(-10deg) translateX(calc(-100%/6))
}
100% {
	transform:rotateY(0) translateX(calc(-100%/3))
}
}@keyframes xz2-3 {
	0% {
	transform:rotateY(0) translateX(calc(-100%/3))
}
50% {
	transform:rotateY(-10deg) translateX(calc(-100%/2))
}
100% {
	transform:rotateY(0) translateX(calc(-100%/3*2))
}
}@keyframes xz3-2 {
	0% {
	transform:rotateY(0) translateX(calc(-100%/3*2))
}
50% {
	transform:rotateY(10deg) translateX(calc(-100%/2))
}
100% {
	transform:rotateY(0) translateX(calc(-100%/3))
}
}@keyframes xz2-1 {
	0% {
	transform:rotateY(0) translateX(calc(-100%/3))
}
50% {
	transform:rotateY(10deg) translateX(calc(-100%/6))
}
100% {
	transform:rotateY(0) translateX(0)
}
}@keyframes xz1-3 {
	0% {
	transform:rotateY(0) translateX(0)
}
50% {
	transform:rotateY(-12deg) translateX(calc(-100%/3))
}
100% {
	transform:rotateY(0) translateX(calc(-100%/3*2))
}
}@keyframes xz3-1 {
	0% {
	transform:rotateY(0) translateX(calc(-100%/3*2))
}
50% {
	transform:rotateY(12deg) translateX(calc(-100%/3))
}
100% {
	transform:rotateY(0) translateX(0)
}
}.home-banner-index {
	display:inline-block;
	position:absolute;
	width:16px;
	height:16px;
	bottom:20px;
	left:50%;
	margin-left:-8px;
	box-sizing:border-box;
	border:3px #454545 solid;
	background:#454545;
	border-radius:50%;
	transition:all 1s linear;
	z-index:20;
	cursor:pointer;
}
.home-banner-index:nth-child(1) {
	margin-left:-28px;
}
.home-banner-index:nth-child(3) {
	margin-left:12px;
}
.home-banner-now {
	background:#ffffff;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

ppt特效轮播图(原创)

0