<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3实现3D时间轴效果 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/modernizr.custom.63321.js"></script>
<!--[if lte IE 7]><style>.support-note .note-ie{display:block;}</style><![endif]-->
</head>
<body>
<div class="container">
<header class="clearfix">
<h1><span>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</span></h1>
<div class="support-note">
<span class="note-ie">Sorry, only modern browsers.</span>
</div>
</header>
<section class="main">
<ul class="timeline">
<li class="event">
<input type="radio" name="tl-group" checked/>
<label></label>
<div class="thumb user-4"><span>19 Nov</span></div>
<div class="content-perspective">
<div class="content">
<div class="content-inner">
<h3>I find your lack of faith disturbing</h3>
<p>Don't be too proud of this technological terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force. The plans you refer to will soon be back in our hands. A tremor in the Force. The last time I felt it was in the presence of my old master. Escape is not his plan. I must face him. Alone.</p>
</div>
</div>
</div>
</li>
<li class="event">
<input type="radio" name="tl-group"/>
<label></label>
<div class="thumb user-6"><span>18 Nov</span></div>
<div class="content-perspective">
<div class="content">
<div class="content-inner">
<h3>I ain't shooting this thing, I hate guns.</h3>
<p>Ha, didn't even stay for the wedding. Just took his million spacebucks and ran. And you will not call me 'you'. You will never address me as 'you'. You will call me 'your royal highness'. I really must go back. I shouldn't have run away. I realize now that love is one luxury a princess cannot afford. </p>
</div>
</div>
</div>
</li>
<li class="event">
<input type="radio" name="tl-group"/>
<label></label>
<div class="thumb user-3"><span>17 Nov</span></div>
<div class="content-perspective">
<div class="content">
<div class="content-inner">
<h3>My brains are going into my feet! </h3>
<p>We're done with you. Go back to the golf course and work on your putz. Nah, he got the upside, I got the downside. See there's two sides to every Schwartz. What's the matter with this thing, what's all that churnning and bubbling, you call that radar screen? Ah, planet Druidia. And under that air shield, ten thousand years of fresh air. We must get through that air shield! Say goodbye to your two best friends, and I don't mean your pals in the Winnebago. So, Lone Star, now you see that evil will always triumph because good is dumb. </p>
</div>
</div>
</div>
</li>
<li class="event">
<input type="radio" name="tl-group"/>
<label></label>
<div class="thumb user-5"><span>16 Nov</span></div>
<div class="content-perspective">
<div class="content">
<div class="content-inner">
<h3>Would you please stop calling me that?</h3>
<p>You make it so difficult sometimes. You have your moments. Not many of them, but you do have them. You're not actually going IN to an asteroid field? I happen to like nice men. This bucket of bolts's never gonna get us past that blockade. We're going to get pulverized if we stay out here much longer. Evacuate remaining ground staff.</p>
</div>
</div>
</div>
</li>
<li class="event">
<input type="radio" name="tl-group"/>
<label></label>
<div class="thumb user-2"><span>15 Nov</span></div>
<div class="content-perspective">
<div class="content">
<div class="content-inner">
<h3>Funny, she doesn't look Druish</h3>
<p>It's not that we're afraid, far from it, it's just that we've got this thing about death... It's not us! I'm a mog: half man, half dog. I'm my own best friend! The minute we move in they're gonna spot us on their radar. Whoa, hold it, time. Chief... I can't... I can't go any further. I can't go any further. </p>
</div>
</div>
</div>
</li>
<li class="event">
<input type="radio" name="tl-group"/>
<label></label>
<div class="thumb user-7"><span>14 Nov</span></div>
<div class="content-perspective">
<div class="content">
<div class="content-inner">
<h3>Ouch! Pay attention to what you're doing! </h3>
<p>Artoo says that the chances of survival are 725 to 1. Actually Artoo has been known to make mistakes... from time to time... Oh dear...The odds of successfully surviving an attack on an Imperial Star Destroyer are approximately... Sir, it's quite possible this asteroid is not entirely stable. Oh. They've encased him in Carbonite. He should be quite well protected. If he survived the freezing process, that is. If I may say so, sir, I noticed earlier the hyperdrive motivator has been damaged. It's impossible to go to lightspeed. Stupid little short-circuit! He'll be *quite* all right. </p>
</div>
</div>
</div>
</li>
<li class="event">
<input type="radio" name="tl-group"/>
<label></label>
<div class="thumb user-1"><span>13 Nov</span></div>
<div class="content-perspective">
<div class="content">
<div class="content-inner">
<h3>Rhhhnn gggnn. Garrrrr!</h3>
<p>Rrrrrrr rrrraaaahhh rrrrrrggghhhhnn! Arrrggghhnnn. Grrrhn. Gahr. Rrrrrrr rrrraaaahhh rrrrrrggghhhhnn! Grrf. Arrrggghhnnn. Grrrhn. Gahr. Grrrhn. Gahr. Rrrrrrr rrrraaaahhh rrrrrrggghhhhnn! Gahr. Gahr. Arrrggghhnnn. Grrrhn.</p>
</div>
</div>
</div>
</li>
<li class="event">
<input type="radio" name="tl-group"/>
<label></label>
<div class="thumb user-8"><span>12 Nov</span></div>
<div class="content-perspective">
<div class="content">
<div class="content-inner">
<h3>I hope it's for adult dating</h3>
<p>Can we talk? OK, we all know Prince Valium is a pill. But you could have married him for your father's sake and had a headache for the next 25 years. Well, goodbye virgin alarm. Besides he got a sexy voice. He might be cute. Hey wait, you forgot to get married! And if we go over our pagecount, the network will kill us. You know, you've got a very unique voice. You should be in silent films.</p>
</div>
</div>
</div>
</li>
</ul>
</section>
</div><!-- /container -->
<div style="text-align:center;clear:both">
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p><br>
</div>
</body>
</html>
css3实现3D时间轴效果.zip
版权申诉
23 浏览量
2022-11-17
21:17:36
上传
评论
收藏 121KB ZIP 举报
css3实现3D时间轴效果.zip （14个子文件） 
css3实现3D时间轴效果 jiaoben425 css font 
fontawesome-selected.ttf 5KB demo.css 3KB style.css 9KB images 
barf.jpg 5KB leia.jpg 4KB vespa.jpg 4KB darthvader.jpg 4KB chewbacca.jpg 5KB darkhelmet.jpg 4KB c3po.jpg 4KB dotmatrix.jpg 6KB
index.html 7KB js modernizr.custom.63321.js 9KB css3实现3D时间轴效果.jpg 77KB资源评论
