Skip to content

Commit 0e62292

Browse files
yangxi0126yangxi0126
committed
webCode
前端特效代码
1 parent e65bff3 commit 0e62292

File tree

466 files changed

+204902
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

466 files changed

+204902
-0
lines changed

‎3D图片切换/1.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>无标题文档</title>
6+
<style>
7+
div{ width:100px;height:100px; background:red; transition:1s;}
8+
div:hover{ width:200px;height:200px; background:blue;}
9+
</style>
10+
</head>
11+
<body>
12+
<div></div>
13+
</body>
14+
</html>

‎3D图片切换/10_立方体.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>无标题文档</title>
6+
<style>
7+
.wrap{ width:200px;height:200px;padding:200px;border:1px solid #000; -webkit-perspective:800px;}
8+
.box{width:200px;height:200px; position:relative; -webkit-transform-style:preserve-3d; transition:3s all;-webkit-transform: translateZ(-100px) rotateX(0deg);}
9+
.box div{width:200px;height:200px; position:absolute; font-size:100px; font-weight:bold; line-height:200px; text-align:center; color:#fff;}
10+
.box div:nth-of-type(1){ background:Red;top:-200px;left:0; -webkit-transform-origin:bottom; -webkit-transform: translateZ(100px) rotateX(90deg);}
11+
.box div:nth-of-type(2){ background:blue;top:0px;left:-200px; -webkit-transform-origin:right; -webkit-transform:translateZ(100px) rotateY(-90deg);}
12+
.box div:nth-of-type(3){ background:yellow;top:0px;left:0;-webkit-transform:translateZ(100px);}
13+
.box div:nth-of-type(4){ background:green;top:0px;left:200px; -webkit-transform-origin:left; -webkit-transform:translateZ(100px) rotateY(90deg);}
14+
.box div:nth-of-type(5){ background:pink;top:200px;left:0; -webkit-transform-origin:top; -webkit-transform:translateZ(100px) rotateX(-90deg);}
15+
.box div:nth-of-type(6){ background:#f60;top:0px;left:0; -webkit-transform:translateZ(-100px) rotateX(180deg); }
16+
.wrap:hover .box{ -webkit-transform: translateZ(-100px) rotateX(180deg);}
17+
</style>
18+
</head>
19+
<body>
20+
<div class="wrap">
21+
<div class="box">
22+
<div>1</div>
23+
<div>2</div>
24+
<div>3</div>
25+
<div>4</div>
26+
<div>5</div>
27+
<div>6</div>
28+
</div>
29+
</div>
30+
</body>
31+
</html>

‎3D图片切换/11_立方体.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>无标题文档</title>
6+
<style>
7+
.wrap{ width:200px;height:200px;padding:200px;border:1px solid #000; -webkit-perspective:800px;}
8+
.box{width:200px;height:200px; position:relative; -webkit-transform-style:preserve-3d; transition:3s all;-webkit-transform: translateZ(-100px) rotateX(0deg);}
9+
.box div{width:200px;height:200px; position:absolute; font-size:100px; font-weight:bold; line-height:200px; text-align:center; color:#fff;left:0;top:0;}
10+
.box div:nth-of-type(1){ background:Red;-webkit-transform:translateZ(100px);}
11+
.box div:nth-of-type(2){ background:blue;-webkit-transform-origin:top;-webkit-transform:translateZ(-100px) rotateX(90deg);}
12+
.box div:nth-of-type(3){ background:yellow;-webkit-transform:translateZ(-100px) rotateX(180deg);}
13+
.box div:nth-of-type(4){ background:green; -webkit-transform-origin:bottom;-webkit-transform:translateZ(-100px) rotateX(-90deg);}
14+
.wrap:hover .box{ -webkit-transform: translateZ(-100px) rotateX(180deg);}
15+
</style>
16+
</head>
17+
<body>
18+
<div class="wrap">
19+
<div class="box">
20+
<div>1</div>
21+
<div>2</div>
22+
<div>3</div>
23+
<div>4</div>
24+
</div>
25+
</div>
26+
</body>
27+
</html>

‎3D图片切换/12_3D图片旋转.html

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>无标题文档</title>
6+
<style id="css">
7+
.box{ width:800px;margin:30px auto;}
8+
#picList{margin:0;padding:0; height:360px; -webkit-perspective:800px;}
9+
#picList li{width:25px;height:360px; position:relative;list-style:none;float:left;-webkit-transform-style:preserve-3d;-webkit-transform: translateZ(-180px) rotateX(0deg);}
10+
#picList a {position:absolute;left:0;top:0; width:100%;height:100%;}
11+
#picList a:nth-of-type(1){ background-image:url(img/1.jpg);-webkit-transform:translateZ(180px);}
12+
#picList a:nth-of-type(2){ background:url(img/2.jpg) no-repeat;-webkit-transform-origin:top;-webkit-transform:translateZ(-180px) rotateX(90deg);}
13+
#picList a:nth-of-type(3){ background:url(img/3.jpg) no-repeat;-webkit-transform:translateZ(-180px) rotateX(180deg);}
14+
#picList a:nth-of-type(4){ background:url(img/4.jpg) no-repeat;-webkit-transform-origin:bottom;-webkit-transform:translateZ(-180px) rotateX(-90deg);}
15+
#picList span{ width:360px;height:360px; background:#333; position:absolute;top:0;}
16+
#picList span:nth-of-type(1){ left:0; -webkit-transform-origin:left; -webkit-transform:translateZ(180px) rotateY(90deg);}
17+
#picList span:nth-of-type(2){ right:0; -webkit-transform-origin:right; -webkit-transform:translateZ(180px) rotateY(-90deg);}
18+
#btns{padding:50px; height:30px;}
19+
#btns li{ height:30px;width:30px; background:#000;color:#fff; font-size:16px; text-align:center; line-height:30px; margin:0 10px; float:left; border-radius:50%; list-style:none;}
20+
#btns .active{ background:#f60;}
21+
</style>
22+
<script>
23+
window.onload=function()
24+
{
25+
var oPicList=document.getElementById("picList");
26+
var oCss=document.getElementById("css");
27+
var aBtns=document.getElementById("btns").getElementsByTagName("li");
28+
var aPic=[];
29+
var iLiW=25;
30+
var sHtml="";
31+
var sStyle="";
32+
var iZindex=0;
33+
var iLength=oPicList.clientWidth/iLiW;
34+
var iNow=0;
35+
for(var i=0;i<iLength;i++)
36+
{
37+
i>iLength/2?iZindex--:iZindex++;
38+
sStyle+="#picList li:nth-of-type("+(i+1)+"){z-index:"+iZindex+"}";
39+
sStyle+="#picList li:nth-of-type("+(i+1)+") a{background-position:-"+i*iLiW+"px 0px}";
40+
sHtml+='<li><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><span></span><span></span></li>';
41+
}
42+
oPicList.innerHTML=sHtml;
43+
oCss.innerHTML+=sStyle;
44+
aPic=oPicList.getElementsByTagName("li");
45+
for(var i=0;i<aBtns.length;i++)
46+
{
47+
aBtns[i].onclick=(function(a){
48+
return function()
49+
{
50+
aBtns[iNow].className="";
51+
for(var i=0;i<aPic.length;i++)
52+
{
53+
with(aPic[i].style)
54+
{
55+
transition=0.5*Math.abs(iNow-a)+"s "+i*50+"ms all ease-in-out";
56+
WebkitTransform="translateZ(-180px) rotateX(-"+a*90+"deg)";
57+
}
58+
}
59+
this.className="active";
60+
iNow=a;
61+
}
62+
})(i);
63+
}
64+
};
65+
</script>
66+
</head>
67+
<body>
68+
<div class="box">
69+
<ul id="picList">
70+
</ul>
71+
<ol id="btns">
72+
<li class="active">1</li>
73+
<li>2</li>
74+
<li>3</li>
75+
<li>4</li>
76+
</ol>
77+
</div>
78+
</body>
79+
</html>

‎3D图片切换/2.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>无标题文档</title>
6+
<style>
7+
div{ width:100px;height:100px; background:red; transition:1s width,2s height;}
8+
div:hover{ width:200px;height:200px; background:blue;}
9+
</style>
10+
</head>
11+
<body>
12+
<div></div>
13+
</body>
14+
</html>

‎3D图片切换/3.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>无标题文档</title>
6+
<style>
7+
div{ width:100px;height:100px; background:red; transition:1s width,2s 1s height;}
8+
div:hover{ width:200px;height:200px; background:blue;}
9+
</style>
10+
</head>
11+
<body>
12+
<div></div>
13+
</body>
14+
</html>

‎3D图片切换/3D图片切换.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>无标题文档</title>
6+
<style id="css">
7+
body,ul,ol{ margin:0;padding:0; list-style:none;}
8+
.box{width:800px; margin:50px auto;
9+
}
10+
.picList{ width:800px;height:360px;-webkit-perspective:800px; }
11+
.picList li{ width:25px;height:360px;float:left;position:relative;-webkit-transform-style:preserve-3d; -webkit-transform:translateZ(-180px);}
12+
.picList a{ width:100%; height:360px; position:absolute; left:0;top:0;}
13+
.picList span{ width:360px;height:360px; background:#333; position:absolute; top:0;}
14+
.picList li a:nth-of-type(1){ background:url(img/1.jpg) no-repeat; -webkit-transform:translateZ(180px);}
15+
.picList li a:nth-of-type(2){ background:url(img/2.jpg) no-repeat; -webkit-transform:translateZ(-180px) rotateX(90deg); -webkit-transform-origin:top;}
16+
.picList li a:nth-of-type(3){ background:url(img/3.jpg) no-repeat;-webkit-transform:translateZ(-180px) rotateX(180deg);}
17+
.picList li a:nth-of-type(4){ background:url(img/4.jpg) no-repeat;-webkit-transform-origin:bottom;-webkit-transform: translateZ(-180px) rotateX(-90deg);}
18+
.picList li span:nth-of-type(1){ left:0; -webkit-transform-origin:left;-webkit-transform:translateZ(180px) rotateY(90deg);}
19+
.picList li span:nth-of-type(2){right:0; -webkit-transform-origin:right;-webkit-transform:translateZ(180px) rotateY(-90deg);}
20+
#btn{padding:50px; height:30px;}
21+
#btn li{ width:30px;height:30px; background:#000; color:#fff; font:bold 16px/30px Arial; text-align:center; float:left; margin:0 10px; border-radius:50%;}
22+
#btn .active{ background:#f60;}
23+
</style>
24+
<script>
25+
window.onload=function()
26+
{
27+
var oPic=document.getElementById("pic");
28+
var oCss=document.getElementById("css");
29+
var aBtn=document.getElementById("btn").getElementsByTagName("li");
30+
var iLiW=25;
31+
var iLength=oPic.clientWidth/iLiW;
32+
var aLi=[];
33+
var sHtml="";
34+
var sCss="";
35+
var iZindex=0;
36+
var iNow=0;
37+
for(var i=0;i<iLength;i++)
38+
{
39+
i>iLength/2?iZindex--:iZindex++;
40+
sCss+=".picList li:nth-of-type("+(i+1)+"){z-index:"+iZindex+";}.picList li:nth-of-type("+(i+1)+") a{background-position:-"+i*iLiW+"px 0px;}"
41+
}
42+
oCss.innerHTML+=sCss;
43+
for(var i=0;i<iLength;i++)
44+
{
45+
sHtml+='<li><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a><span></span><span></span></li>';
46+
}
47+
oPic.innerHTML=sHtml;
48+
aLi=oPic.getElementsByTagName("li");
49+
for(var i=0;i<aBtn.length;i++)
50+
{
51+
aBtn[i].onclick=(function(a){
52+
return function()
53+
{
54+
aBtn[iNow].className="";
55+
for(var i=0;i<aLi.length;i++)
56+
{
57+
aLi[i].style.transition=Math.abs(a-iNow)*0.5+"s "+i*80+"ms all ease";
58+
aLi[i].style.WebkitTransform="translateZ(-180px) rotateX(-"+a*90+"deg)";
59+
}
60+
iNow=a;
61+
aBtn[iNow].className="active";
62+
};
63+
})(i);
64+
}
65+
}
66+
</script>
67+
</head>
68+
<body>
69+
<div class="box">
70+
<ul class="picList" id="pic">
71+
72+
</ul>
73+
<ol id="btn">
74+
<li class="active">1</li>
75+
<li>2</li>
76+
<li>3</li>
77+
<li>4</li>
78+
</ol>
79+
</div>
80+
</body>
81+
</html>

‎3D图片切换/3D旋转.ppt

389 KB
Binary file not shown.

‎3D图片切换/4.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>无标题文档</title>
6+
<style>
7+
div{ width:100px;height:100px; background:red; transition:3s all ease;}
8+
div:hover{ width:800px;}
9+
</style>
10+
</head>
11+
<body>
12+
<div></div>
13+
</body>
14+
</html>

‎3D图片切换/5.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>无标题文档</title>
6+
<style>
7+
div{ width:100px;height:100px; background:red; transition:5s all cubic-bezier(0.040, 0.065, 0.185, 1.650);}
8+
div:hover{ width:800px;}
9+
</style>
10+
</head>
11+
<body>
12+
<div></div>
13+
</body>
14+
</html>

‎3D图片切换/6.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>无标题文档</title>
6+
<style>
7+
.box{ width:100px;height:100px;border:2px solid #000; padding:150px; -webkit-transform-style:preserve-3d; -webkit-perspective:200px;}
8+
.box div{height:100px;background:red; transition:1s all;}
9+
.box:hover div{ -webkit-transform:rotateX(50deg);}
10+
</style>
11+
</head>
12+
<body>
13+
<div class="box">
14+
<div></div>
15+
</div>
16+
</body>
17+
</html>

‎3D图片切换/7.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>无标题文档</title>
6+
<style>
7+
.box{ width:100px;height:100px;border:2px solid #000; padding:150px; -webkit-transform-style:preserve-3d; -webkit-perspective:200px;}
8+
.box div{height:100px;background:red; transition:1s all;}
9+
.box:hover div{ -webkit-transform:rotateY(50deg);}
10+
</style>
11+
</head>
12+
<body>
13+
<div class="box">
14+
<div></div>
15+
</div>
16+
</body>
17+
</html>

‎3D图片切换/8.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>无标题文档</title>
6+
<style>
7+
.box{ width:100px;height:100px;border:2px solid #000; padding:150px; -webkit-transform-style:preserve-3d; -webkit-perspective:200px;}
8+
.box div{height:100px;background:red; transition:1s all;}
9+
.box:hover div{ -webkit-transform:translateZ(-100px);}
10+
</style>
11+
</head>
12+
<body>
13+
<div class="box">
14+
<div></div>
15+
</div>
16+
</body>
17+
</html>

‎3D图片切换/9_立方体.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<title>无标题文档</title>
6+
<style>
7+
.wrap{ width:200px;height:200px;padding:200px;border:1px solid #000; -webkit-perspective:800px;}
8+
.box{width:200px;height:200px; position:relative; -webkit-transform-style:preserve-3d; transition:3s all;}
9+
.box div{width:200px;height:200px; position:absolute; font-size:100px; font-weight:bold; line-height:200px; text-align:center; color:#fff;}
10+
.box div:nth-of-type(1){ background:Red;top:-200px;left:0; -webkit-transform-origin:bottom; -webkit-transform: translateZ(100px) rotateX(90deg);}
11+
.box div:nth-of-type(2){ background:blue;top:0px;left:-200px; -webkit-transform-origin:right; -webkit-transform:translateZ(100px) rotateY(-90deg);}
12+
.box div:nth-of-type(3){ background:yellow;top:0px;left:0;-webkit-transform:translateZ(100px);}
13+
.box div:nth-of-type(4){ background:green;top:0px;left:200px; -webkit-transform-origin:left; -webkit-transform:translateZ(100px) rotateY(90deg);}
14+
.box div:nth-of-type(5){ background:pink;top:200px;left:0; -webkit-transform-origin:top; -webkit-transform:translateZ(100px) rotateX(-90deg);}
15+
.box div:nth-of-type(6){ background:#f60;top:0px;left:0; -webkit-transform:translateZ(-100px); }
16+
.wrap:hover .box{ -webkit-transform:rotateX(180deg);}
17+
</style>
18+
</head>
19+
<body>
20+
<div class="wrap">
21+
<div class="box">
22+
<div>1</div>
23+
<div>2</div>
24+
<div>3</div>
25+
<div>4</div>
26+
<div>5</div>
27+
<div>6</div>
28+
</div>
29+
</div>
30+
</body>
31+
</html>

‎3D图片切换/img/1.jpg

55.4 KB
Loading

‎3D图片切换/img/2.jpg

78.7 KB
Loading

‎3D图片切换/img/3.jpg

70.9 KB
Loading

‎3D图片切换/img/4.jpg

55.8 KB
Loading

‎3D轮播旋转/3D轮播旋转.txt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
transform-style: preserve-3d;ʹ��ת������Ԫ�ر�����3Dת��(�ǵü�ǰ׺)
2+
perspective����Ԫ�ر��鿴λ�õ���ͼ��perspective����ֻӰ��3Dת��Ԫ�ء�

0 commit comments

Comments
 (0)