以下是 css3螺旋3D动画代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>css3</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/animation_generated.css"/>
</head>
<body>
<div id="wrapper">
<h1>css3螺旋3D动画</h1>
<div id="content">
<ol id="container">
<!-- START GENERATED CODE -->
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<li><div></div><div></div></li>
<!-- END GENERATED CODE -->
</ol>
</div>
</div>
</body>
</html>
CSS代码(style.css):
/* __ _ _ _ / _| | (_) | | _ __ ___ __ _ _ __ ___ ___ | |_ ___ | |_ ___ _ __ ___| |_| '_ ` _ \ / _` | '__/ __/ _ \| _/ _ \| | |/ _ \ | '_ \ / _ \ __|| | | | | | (_| | | | (_| (_) | || (_) | | | (_) || | | | __/ |_|_| |_| |_|\__,_|_| \___\___/|_| \___/|_|_|\___(_)_| |_|\___|\__|*/
/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0;padding:0;}
/* HTML ELEMENTS */
body{background-color:#464646;font-family:"Segoe UI","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Arial,Tahoma,Verdana,sans-serif;font-size:13px;color:#eee;}
h1{font:bold 65px/60px Helvetica,Arial,Sans-serif;text-align:center;color:#eee;text-shadow:0px 2px 6px #333;}
h1 small{font-size:20px;text-transform:uppercase;letter-spacing:14px;display:block;color:#ccc;}
h2 a{display:block;text-decoration:none;margin:0 0 30px 0;font:italic 45px Georgia,Times,Serif;text-align:center;color:#bfe1f1;text-shadow:0px 2px 6px #333;}
h2 a:hover{color:#90bcd0;}
/* COMMON CLASSES */
.break{clear:both;}
/* WRAPPER */
#wrapper{width:800px;margin:40px auto;}
/* CONTENT */
#content{}
#content p{width:600px;margin:10px auto;}
#content p a{color:#bfe1f1;}
#content p a:hover{color:#90bcd0;}
#container{list-style:none;width:500px;height:500px;margin:100px auto;-webkit-perspective:1000;/* Add depth to the rotation */
}
#container li{height:5px;width:500px;}
#container li div{position:absolute;height:5px;width:500px;-webkit-animation-duration:4s;/* Duration of the animations */
-webkit-transform-style:preserve-3d;/* Ensure 3d animation */
-webkit-animation-fill-mode:forwards;/* Stop the animation at the last keyframe */
}
#container li div:nth-child(1){background-image:url("../images/ipad.png");}
/* Horizontal flipped iPad image is used */
#container li div:nth-child(2){background-image:url("../images/iphone.png");-webkit-backface-visibility:hidden;/* Hide the iPhone when facing the other side */
}
分享到QQ
分享到微博
微信扫一扫
