3D自动轮播图特效代码

最新推荐文章于 2024-01-22 23:43:25 发布

酷爱码

最新推荐文章于 2024-01-22 23:43:25 发布

阅读量2k

点赞数 2

分类专栏： html 文章标签： html css jquery

本文链接：https://blog.csdn.net/huayula/article/details/105978467

版权

html 专栏收录该内容

196 篇文章 4 订阅

订阅专栏

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D自动图片轮播</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.wrap {
	margin:0px auto;
	width:800px;
	height:400px;
}
.wrap1 {
	margin:100px auto;
	width:800px;
	height:400px;
}
.off5,div,img,.off6,.off7,.off8 {
	width:800px;
	height:100px;
}
.off5,.off6,.off7,.off8 {
	position:relative;
	-webkit-transform-style:preserve-3d;
	-webkit-transform-perspective:1000;
	-webkit--transform-duration:1s;
}
.off5 {
	-webkit-animation:a5 10s ease 1s infinite;
}
.off6 {
	-webkit-animation:a6 10s ease 1s infinite;
}
.off7 {
	-webkit-animation:a7 10s ease 1s infinite;
}
.off8 {
	-webkit-animation:a8 10s ease 1s infinite;
}
.off5 div,.off6 div,.off7 div,.off8 div {
	position:absolute;
	top:0px;
}
.off5 div:nth-child(1),.off6 div:nth-child(1),.off7 div:nth-child(1),.off8 div:nth-child(1) {
	-webkit-transform:rotateY(0deg) translateZ(400px);
}
.off5 div:nth-child(2),.off6 div:nth-child(2),.off7 div:nth-child(2),.off8 div:nth-child(2) {
	-webkit-transform:rotateY(90deg) translateZ(400px);
}
.off5 div:nth-child(3),.off6 div:nth-child(3),.off7 div:nth-child(3),.off8 div:nth-child(3) {
	-webkit-transform:rotateY(180deg) translateZ(400px);
}
.off5 div:nth-child(4),.off6 div:nth-child(4),.off7 div:nth-child(4),.off8 div:nth-child(4) {
	-webkit-transform:rotateY(-90deg) translateZ(400px);
}
@-webkit-keyframes a5 {
	10% {
	-webkit-transform:rotateY(90deg);
}
25% {
	-webkit-transform:rotateY(90deg);
}
35% {
	-webkit-transform:rotateY(180deg);
}
50% {
	-webkit-transform:rotateY(180deg);
}
55% {
	-webkit-transform:rotateY(270deg);
}
75% {
	-webkit-transform:rotateY(270deg);
}
85% {
	-webkit-transform:rotateY(360deg);
}
100% {
	-webkit-transform:rotateY(360deg);
}
}@-webkit-keyframes a6 {
	15% {
	-webkit-transform:rotateY(90deg);
}
25% {
	-webkit-transform:rotateY(90deg);
}
40% {
	-webkit-transform:rotateY(180deg);
}
50% {
	-webkit-transform:rotateY(180deg);
}
60% {
	-webkit-transform:rotateY(270deg);
}
75% {
	-webkit-transform:rotateY(270deg);
}
90% {
	-webkit-transform:rotateY(360deg);
}
100% {
	-webkit-transform:rotateY(360deg);
}
}@-webkit-keyframes a7 {
	20% {
	-webkit-transform:rotateY(90deg);
}
25% {
	-webkit-transform:rotateY(90deg);
}
45% {
	-webkit-transform:rotateY(180deg);
}
50% {
	-webkit-transform:rotateY(180deg);
}
65% {
	-webkit-transform:rotateY(270deg);
}
75% {
	-webkit-transform:rotateY(270deg);
}
95% {
	-webkit-transform:rotateY(360deg);
}
100% {
	-webkit-transform:rotateY(360deg);
}
}@-webkit-keyframes a8 {
	25% {
	-webkit-transform:rotateY(90deg);
}
50% {
	-webkit-transform:rotateY(180deg);
}
75% {
	-webkit-transform:rotateY(270deg);
}
100% {
	-webkit-transform:rotateY(360deg);
}
}</style>
</head>
<body>
<div class="wrap">
    <div class="wrap2">
        <div class="off5">
            <div><img src="http://www.jq22.com/img/cs/500x300-1.png"></div>
            <div><img src="https://cdn.u1.huluxia.com/g3/M01/06/E9/wKgBOV4z87aAJ14UAAB65D5NmoI335.jpg"></div>
            <div><img src="http://www.jq22.com/img/cs/500x300-3.png"></div>
            
        </div>
        <div class="off6">
            <div><img src="http://www.jq22.com/img/cs/500x300-1.png"></div>
            <div><img src="https://cdn.u1.huluxia.com/g3/M01/06/E9/wKgBOV4z87aAJ14UAAB65D5NmoI335.jpg"></div>
            <div><img src="http://www.jq22.com/img/cs/500x300-3.png"></div>
           

        </div>
        <div class="off7">
            <div><img src="http://www.jq22.com/img/cs/500x300-1.png"></div>
            <div><img src="https://cdn.u1.huluxia.com/g3/M01/06/E9/wKgBOV4z87aAJ14UAAB65D5NmoI335.jpg"></div>
            <div><img src="http://www.jq22.com/img/cs/500x300-3.png"></div>
           

        </div>
        <div class="off8">
            <div><img src="http://www.jq22.com/img/cs/500x300-1.png"></div>
            <div><img src="http://www.jq22.com/img/cs/500x300-2.png"></div>
            <div><img src="https://cdn.u1.huluxia.com/g3/M01/06/E9/wKgBOV4z87aAJ14UAAB65D5NmoI335.jpg"></div>
           
        </div>
    </div></div>

<script>

</script>

</body>
</html>

酷爱码

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
3D自动轮播图特效代码

代码如下：<!doctype html><html><head><meta charset="utf-8"><title>3D自动图片轮播</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js">&lt...
复制链接

扫一扫