以下是 CSS3图片导航效果特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Content Navigator with CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Content Navigator with CSS3" />
<meta name="keywords" content="content, navigation, css3, html5, sliding, content" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<span class="right">
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<h1>Content Navigator <span>with CSS3</span></h1>
<h2>Responsive content navigation using CSS3 transitions and :target pseudo-class</h2>
<nav class="codrops-demos">
<a class="current-demo" href="index.html#slide-main">Demo 1</a>
<a href="index2.html#slide-main">Demo 2</a>
<a href="index3.html#slide-main">Demo 3</a>
<a href="index4.html#slide-main">Demo 4</a>
<a href="index5.html#slide-main">Demo 5</a>
</nav>
</header>
<!--[if lte IE 9]>
<p style="font-size: 20px; padding: 50px;">Sorry, this only works in modern browsers...</p>
<![endif]-->
<section class="cn-container">
<div class="cn-slide" id="slide-main">
<h2>Explore this</h2>
<nav>
<a href="#slide-1">Philosphy</a>
<a href="#slide-2">Science</a>
<a href="#slide-3">Literature</a>
</nav>
</div>
<!-- Slide 1 and Sub-slides -->
<div class="cn-slide cn-slide-sub" id="slide-1">
<h2>Philosophy</h2>
<a href="#slide-main" class="cn-back">Back</a>
<nav>
<a href="#slide-1-1">Epistemology</a>
<a href="#slide-1-2">Metaphysics</a>
<a href="#slide-1-3">Aesthetics</a>
<a href="#slide-1-4">Ethics</a>
</nav>
</div>
<div class="cn-slide" id="slide-1-1">
<h2>Epistemology</h2>
<a href="#slide-1" class="cn-back">Back</a>
<div class="cn-content">
<p>The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals can't manufacture the amino acid lysine. Unless they're continually supplied with lysine by us, they'll slip into a coma and die. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<div class="cn-slide" id="slide-1-2">
<h2>Metaphysics</h2>
<a href="#slide-1" class="cn-back">Back</a>
<div class="cn-content">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<div class="cn-slide" id="slide-1-3">
<h2>Aesthetics</h2>
<a href="#slide-1" class="cn-back">Back</a>
<div class="cn-content">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<div class="cn-slide" id="slide-1-4">
<h2>Ethics</h2>
<a href="#slide-1" class="cn-back">Back</a>
<div class="cn-content">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<!-- Slide 2 and Sub-slides -->
<div class="cn-slide cn-slide-sub" id="slide-2">
<h2>Science</h2>
<a href="#slide-main" class="cn-back">Back</a>
<nav>
<a href="#slide-2-1">Physics</a>
<a href="#slide-2-2">Biology</a>
<a href="#slide-2-3">Anthropology</a>
<a href="#slide-2-4">Chemistry</a>
</nav>
</div>
<div class="cn-slide" id="slide-2-1">
<h2>Physics</h2>
<a href="#slide-2" class="cn-back">Back</a>
<div class="cn-content">
<p>The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals can't manufacture the amino acid lysine. Unless they're continually supplied with lysine by us, they'll slip into a coma and die. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<div class="cn-slide" id="slide-2-2">
<h2>Biology</h2>
<a href="#slide-2" class="cn-back">Back</a>
<div class="cn-content">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<div class="cn-slide" id="slide-2-3">
<h2>Anthropology</h2>
<a href="#slide-2" class="cn-back">Back</a>
<div class="cn-content">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<div class="cn-slide" id="slide-2-4">
<h2>Chemistry</h2>
<a href="#slide-2" class="cn-back">Back</a>
<div class="cn-content">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<!-- Slide 3 and Sub-slides -->
<div class="cn-slide cn-slide-sub" id="slide-3">
<h2>Literature</h2>
<a href="#slide-main" class="cn-back">Back</a>
<nav>
<a href="#slide-3-1">Poetry</a>
<a href="#slide-3-2">Prose</a>
<a href="#slide-3-3">Fiction</a>
<a href="#slide-3-4">Non-fiction</a>
</nav>
</div>
<div class="cn-slide" id="slide-3-1">
<h2>Poetry</h2>
<a href="#slide-3" class="cn-back">Back</a>
<div class="cn-content">
<p>The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals can't manufacture the amino acid lysine. Unless they're continually supplied with lysine by us, they'll slip into a coma and die. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<div class="cn-slide" id="slide-3-2">
<h2>Prose</h2>
<a href="#slide-3" class="cn-back">Back</a>
<div class="cn-content">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<div class="cn-slide" id="slide-3-3">
<h2>Fiction</h2>
<a href="#slide-3" class="cn-back">Back</a>
<div class="cn-content">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<div class="cn-slide" id="slide-3-4">
<h2>Non-fiction</h2>
<a href="#slide-3" class="cn-back">Back</a>
<div class="cn-content">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
</section>
</div>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Content Navigator with CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Content Navigator with CSS3" />
<meta name="keywords" content="content, navigation, css3, html5, sliding, content" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style2.css" />
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<span class="right">
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<h1>Content Navigator <span>with CSS3</span></h1>
<h2>Responsive content navigation using CSS3 transitions and :target pseudo-class</h2>
<nav class="codrops-demos">
<a href="index.html#slide-main">Demo 1</a>
<a class="current-demo" href="index2.html#slide-main">Demo 2</a>
<a href="index3.html#slide-main">Demo 3</a>
<a href="index4.html#slide-main">Demo 4</a>
<a href="index5.html#slide-main">Demo 5</a>
</nav>
</header>
<!--[if lte IE 9]>
<p style="font-size: 20px; padding: 50px;">Sorry, this only works in modern browsers...</p>
<![endif]-->
<section class="cn-container">
<div class="cn-slide" id="slide-main">
<h2>Explore this</h2>
<nav>
<a href="#slide-1">Philosphy</a>
<a href="#slide-2">Science</a>
<a href="#slide-3">Literature</a>
</nav>
</div>
<!-- Slide 1 and Sub-slides -->
<div class="cn-slide cn-slide-sub" id="slide-1">
<h2>Philosophy</h2>
<a href="#slide-main" class="cn-back">Back</a>
<nav>
<a href="#slide-1-1">Epistemology</a>
<a href="#slide-1-2">Metaphysics</a>
<a href="#slide-1-3">Aesthetics</a>
<a href="#slide-1-4">Ethics</a>
</nav>
</div>
<div class="cn-slide" id="slide-1-1">
<h2>Epistemology</h2>
<a href="#slide-1" class="cn-back">Back</a>
<div class="cn-content">
<p>The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals can't manufacture the amino acid lysine. Unless they're continually supplied with lysine by us, they'll slip into a coma and die. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<div class="cn-slide" id="slide-1-2">
<h2>Metaphysics</h2>
<a href="#slide-1" class="cn-back">Back</a>
<div class="cn-content">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<div class="cn-slide" id="slide-1-3">
<h2>Aesthetics</h2>
<a href="#slide-1" class="cn-back">Back</a>
<div class="cn-content">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<div class="cn-slide" id="slide-1-4">
<h2>Ethics</h2>
<a href="#slide-1" class="cn-back">Back</a>
<div class="cn-content">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<!-- Slide 2 and Sub-slides -->
<div class="cn-slide cn-slide-sub" id="slide-2">
<h2>Science</h2>
<a href="#slide-main" class="cn-back">Back</a>
<nav>
<a href="#slide-2-1">Physics</a>
<a href="#slide-2-2">Biology</a>
<a href="#slide-2-3">Anthropology</a>
<a href="#slide-2-4">Chemistry</a>
</nav>
</div>
<div class="cn-slide" id="slide-2-1">
<h2>Physics</h2>
<a href="#slide-2" class="cn-back">Back</a>
<div class="cn-content">
<p>The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals can't manufacture the amino acid lysine. Unless they're continually supplied with lysine by us, they'll slip into a coma and die. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<div class="cn-slide" id="slide-2-2">
<h2>Biology</h2>
<a href="#slide-2" class="cn-back">Back</a>
<div class="cn-content">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<div class="cn-slide" id="slide-2-3">
<h2>Anthropology</h2>
<a href="#slide-2" class="cn-back">Back</a>
<div class="cn-content">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<div class="cn-slide" id="slide-2-4">
<h2>Chemistry</h2>
<a href="#slide-2" class="cn-back">Back</a>
<div class="cn-content">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<!-- Slide 3 and Sub-slides -->
<div class="cn-slide cn-slide-sub" id="slide-3">
<h2>Literature</h2>
<a href="#slide-main" class="cn-back">Back</a>
<nav>
<a href="#slide-3-1">Poetry</a>
<a href="#slide-3-2">Prose</a>
<a href="#slide-3-3">Fiction</a>
<a href="#slide-3-4">Non-fiction</a>
</nav>
</div>
<div class="cn-slide" id="slide-3-1">
<h2>Poetry</h2>
<a href="#slide-3" class="cn-back">Back</a>
<div class="cn-content">
<p>The lysine contingency - it's intended to prevent the spread of the animals is case they ever got off the island. Dr. Wu inserted a gene that makes a single faulty enzyme in protein metabolism. The animals can't manufacture the amino acid lysine. Unless they're continually supplied with lysine by us, they'll slip into a coma and die. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<div class="cn-slide" id="slide-3-2">
<h2>Prose</h2>
<a href="#slide-3" class="cn-back">Back</a>
<div class="cn-content">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<div class="cn-slide" id="slide-3-3">
<h2>Fiction</h2>
<a href="#slide-3" class="cn-back">Back</a>
<div class="cn-content">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
<div class="cn-slide" id="slide-3-4">
<h2>Non-fiction</h2>
<a href="#slide-3" class="cn-back">Back</a>
<div class="cn-content">
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic. </p>
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. </p>
</div>
<span class="cn-note">Keep clicked to show image</span>
</div>
</section>
</div>
</body>
</html>
CSS代码(demo.css):
@font-face{font-family:'BebasNeueRegular';src:url('fonts/BebasNeue-webfont.eot');src:url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/BebasNeue-webfont.woff') format('woff'),url('fonts/BebasNeue-webfont.ttf') format('truetype'),url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');font-weight:normal;font-style:normal;}
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html,body{margin:0;padding:0;height:100%;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
section,header{display:block;}
/* General Demo Style */
body{font-family:Cambria,Palatino,"Palatino Linotype","Palatino LT STD",Georgia,serif;background:#fff url(../images/bg.jpg) repeat top left;font-weight:400;font-size:15px;color:#391b27;overflow-y:scroll;overflow-x:hidden;}
a{color:#333;text-decoration:none;}
.container{width:100%;height:100%;position:relative;text-align:center;}
.clr{clear:both;}
.container > header{padding:20px 30px 10px 30px;margin:0px 20px 10px 20px;position:relative;display:block;text-shadow:1px 1px 1px rgba(0,0,0,0.2);text-align:center;}
.container > header h1{font-family:'BebasNeueRegular','Arial Narrow',Arial,sans-serif;font-size:35px;line-height:35px;position:relative;font-weight:400;color:#923e5f;text-shadow:1px 1px 1px rgba(0,0,0,0.1);padding:0px 0px 5px 0px;}
.container > header h1 span{color:#582036;text-shadow:0px 1px 1px rgba(255,255,255,0.8);}
.container > header h2{font-size:16px;font-style:italic;color:#391b27;text-shadow:0px 1px 1px rgba(255,255,255,0.8);}
/* Header Style */
.codrops-top{line-height:24px;font-size:11px;background:rgba(255,255,255,0.4);text-transform:uppercase;z-index:9999;position:relative;box-shadow:1px 0px 2px rgba(0,0,0,0.2);}
.codrops-top a{padding:0px 10px;letter-spacing:1px;color:#333;text-shadow:0px 1px 1px #fff;display:block;float:left;}
.codrops-top a:hover{background:#fff;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
.codrops-demos{text-align:center;display:block;line-height:30px;padding:5px 0px 15px 0px;border-bottom:1px solid rgba(255,255,255,0.4);}
.codrops-demos a{display:inline-block;margin:0px 4px;padding:0px 4px;color:#fff;line-height:20px;font-style:italic;font-size:13px;border-radius:3px;background:rgba(103,59,77,0.1);-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;-ms-transition:all 0.2s linear;transition:all 0.2s linear;}
.codrops-demos a:hover{background:rgba(103,59,77,0.4);}
.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover{background:rgba(103,59,77,0.4);}
CSS代码(style1.css):
.cn-container{width:60%;min-width:300px;max-width:820px;margin:10px auto 0 auto;text-align:left;position:relative;}
.cn-container h2{font-family:'BebasNeueRegular','Arial Narrow',Arial,sans-serif;color:#fff;position:absolute;z-index:1000;text-shadow:0 0 1px rgba(255,255,255,0.8),1px 1px 1px rgba(0,0,0,0.2);font-size:80px;line-height:80px;top:0px;right:200px;white-space:nowrap;opacity:0;-webkit-transition:all 0.3s linear 0.4s;-moz-transition:all 0.3s linear 0.4s;-o-transition:all 0.3s linear 0.4s;-ms-transition:all 0.3s linear 0.4s;transition:all 0.3s linear 0.4s;}
.cn-container .cn-slide:target h2{right:0px;opacity:1;}
.cn-slide{text-align:center;position:absolute;left:-100%;padding-top:80px;margin:0 5%;width:90%;opacity:0;-webkit-transition:left 0.4s linear,opacity 0.4s linear;-moz-transition:left 0.4s linear,opacity 0.4s linear;-o-transition:left 0.4s linear,opacity 0.4s linear;-ms-transition:left 0.4s linear,opacity 0.4s linear;transition:left 0.4s linear,opacity 0.4s linear;}
.cn-slide:target{left:0px;opacity:1;}
.cn-slide nav a{text-align:left;display:block;font-family:'BebasNeueRegular','Arial Narrow',Arial,sans-serif;border:8px solid #fff;padding:2%;font-size:66px;letter-spacing:7px;text-shadow:0px 0px 10px rgba(255,255,255,0.9);color:rgba(255,255,255,0.1);line-height:66px;margin:0 0 10px 0;outline:none;box-shadow:1px 1px 3px rgba(0,0,0,0.1);background:#fff url(../images/1.jpg) no-repeat center center;-webkit-background-size:100%;-moz-background-size:100%;-o-background-size:100%;background-size:100%;background-clip:padding-box;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.cn-slide nav a:hover{box-shadow:1px 3px 7px rgba(0,0,0,0.25);text-shadow:1px 1px 1px rgba(0,0,0,0.1);color:rgba(255,255,255,0.9);}
.cn-slide-sub nav a{width:42%;display:inline-block;font-size:40px;}
.cn-slide-sub nav a:nth-child(odd){margin-right:5px;}
/* Main Items */
.cn-slide nav a[href="#slide-1"]{background-image:url(../images/1.jpg);}
.cn-slide nav a[href="#slide-2"]{background-image:url(../images/2.jpg);}
.cn-slide nav a[href="#slide-3"]{background-image:url(../images/3.jpg);}
/* Items and sub-items of slide 1*/
.cn-slide nav a[href="#slide-1-1"],#slide-1-1 .cn-content{background-image:url(../images/4.jpg);}
.cn-slide nav a[href="#slide-1-2"],#slide-1-2 .cn-content{background-image:url(../images/5.jpg);}
.cn-slide nav a[href="#slide-1-3"],#slide-1-3 .cn-content{background-image:url(../images/6.jpg);}
.cn-slide nav a[href="#slide-1-4"],#slide-1-4 .cn-content{background-image:url(../images/7.jpg);}
/* Items and sub-items of slide 2*/
.cn-slide nav a[href="#slide-2-1"],#slide-2-1 .cn-content{background-image:url(../images/8.jpg);}
.cn-slide nav a[href="#slide-2-2"],#slide-2-2 .cn-content{background-image:url(../images/9.jpg);}
.cn-slide nav a[href="#slide-2-3"],#slide-2-3 .cn-content{background-image:url(../images/10.jpg);}
.cn-slide nav a[href="#slide-2-4"],#slide-2-4 .cn-content{background-image:url(../images/11.jpg);}
/* Items and sub-items of slide 3*/
.cn-slide nav a[href="#slide-3-1"],#slide-3-1 .cn-content{background-image:url(../images/12.jpg);}
.cn-slide nav a[href="#slide-3-2"],#slide-3-2 .cn-content{background-image:url(../images/13.jpg);}
.cn-slide nav a[href="#slide-3-3"],#slide-3-3 .cn-content{background-image:url(../images/14.jpg);}
.cn-slide nav a[href="#slide-3-4"],#slide-3-4 .cn-content{background-image:url(../images/15.jpg);}
.cn-content{background:#80B8CE url(../images/1.jpg) no-repeat center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;text-align:left;padding:20px 20px 5px;box-shadow:1px 1px 3px rgba(0,0,0,0.1);border:8px solid #fff;margin-top:5px;cursor:pointer;}
.cn-content:active p{opacity:0;}
.cn-content p{line-height:24px;text-shadow:1px 1px 1px rgba(255,255,255,0.9);color:rgba(103,59,77,0.9);padding:15px 20px;margin-bottom:10px;background:rgba(255,255,255,0.96);font-style:italic;border-top:7px solid rgba(103,59,77,0.6);-webkit-transition:opacity 0.3s linear;-moz-transition:opacity 0.3s linear;-o-transition:opacity 0.3s linear;-ms-transition:opacity 0.3s linear;transition:opacity 0.3s linear;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.cn-back{outline:none;text-indent:-9000px;width:49px;height:42px;background:transparent url(../images/arrow.png) no-repeat center center;position:absolute;top:22px;left:-100px;cursor:pointer;opacity:0;-webkit-transition:all 0.4s ease-in-out 0.5s;-moz-transition:all 0.4s ease-in-out 0.5s;-o-transition:all 0.4s ease-in-out 0.5s;-ms-transition:all 0.4s ease-in-out 0.5s;transition:all 0.4s ease-in-out 0.5s;}
.cn-slide:target .cn-back{left:3px;opacity:1;}
.cn-note{text-align:right;font-size:10px;font-style:normal;text-align:right;padding:10px;display:block;font-family:Arial;text-shadow:1px 1px 1px rgba(255,255,255,0.7);}
@media screen and (max-width:1060px){.cn-slide-sub nav a{font-size:28px;}
}
@media screen and (max-width:900px){.cn-container h2{font-size:48px;line-height:95px;}
.cn-slide nav a{font-size:38px;}
.cn-slide-sub nav a{width:auto;font-size:36px;display:block;}
.cn-slide-sub nav a:nth-child(odd){margin-right:0px;}
}
CSS代码(style2.css):
.cn-container{width:60%;min-width:300px;max-width:820px;margin:10px auto 0 auto;text-align:left;position:relative;}
.cn-container h2{font-family:'BebasNeueRegular','Arial Narrow',Arial,sans-serif;color:#fff;position:absolute;z-index:10000;text-shadow:0 0 1px rgba(255,255,255,0.8),1px 1px 1px rgba(0,0,0,0.2);font-size:80px;line-height:80px;top:200px;right:0px;white-space:nowrap;opacity:0;-webkit-transition:all 0.5s linear 0.7s;-moz-transition:all 0.5s linear 0.7s;-o-transition:all 0.5s linear 0.7s;-ms-transition:all 0.5s linear 0.7s;transition:all 0.5s linear 0.7s;}
.cn-container .cn-slide:target h2{top:0px;opacity:1;}
.cn-slide{text-align:center;position:absolute;left:0px;padding-top:80px;margin:0 5%;width:90%;opacity:0;}
.cn-slide:target{opacity:1;z-index:1000;}
.cn-slide nav a{text-align:left;display:block;font-family:'BebasNeueRegular','Arial Narrow',Arial,sans-serif;border:8px solid #fff;padding:2%;font-size:66px;letter-spacing:7px;text-shadow:1px 1px 3px rgba(0,0,0,0.4);color:#fff;line-height:66px;outline:none;margin:0 0 10px 0;box-shadow:1px 1px 3px rgba(0,0,0,0.1);background:#fff url(../images/1.jpg) no-repeat center center;-webkit-background-size:100%;-moz-background-size:100%;-o-background-size:100%;background-size:100%;background-clip:padding-box;opacity:0;-webkit-transition:opacity 0.4s linear,border-color 0.3s ease-in-out,color 0.3s ease-in-out;-moz-transition:opacity 0.4s linear,border-color 0.3s ease-in-out,color 0.3s ease-in-out;-o-transition:opacity 0.4s linear,border-color 0.3s ease-in-out,color 0.3s ease-in-out;-ms-transition:opacity 0.4s linear,border-color 0.3s ease-in-out,color 0.3s ease-in-out;transition:opacity 0.4s linear,border-color 0.3s ease-in-out,color 0.3s ease-in-out;}
.cn-slide nav a:hover{border-color:#582036;color:#582036;}
.cn-slide:target nav a{opacity:1;}
.cn-slide nav a:nth-child(2){-webkit-transition-delay:0.3s,0s,0s;-moz-transition-delay:0.3s,0s,0s;-o-transition-delay:0.3s,0s,0s;-ms-transition-delay:0.3s,0s,0s;transition-delay:0.3s,0s,0s;}
.cn-slide nav a:nth-child(3){-webkit-transition-delay:0.6s,0s,0s;-moz-transition-delay:0.6s,0s,0s;-o-transition-delay:0.6s,0s,0s;-ms-transition-delay:0.6s,0s,0s;transition-delay:0.6s,0s,0s;}
.cn-slide nav a:nth-child(4){-webkit-transition-delay:0.9s,0s,0s;-moz-transition-delay:0.9s,0s,0s;-o-transition-delay:0.9s,0s,0s;-ms-transition-delay:0.9s,0s,0s;transition-delay:0.9s,0s,0s;}
.cn-slide-sub nav a{width:42%;display:inline-block;font-size:40px;}
.cn-slide-sub nav a:nth-child(odd){margin-right:5px;}
.cn-content{background:#80B8CE url(../images/1.jpg) no-repeat center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;text-align:left;padding:20px 20px 5px;box-shadow:1px 1px 3px rgba(0,0,0,0.1);border:8px solid #fff;margin-top:5px;cursor:pointer;opacity:0;-webkit-transition:all 0.9s linear;-moz-transition:all 0.9s linear;-o-transition:all 0.9s linear;-ms-transition:all 0.9s linear;transition:all 0.9s linear;}
.cn-slide:target .cn-content{opacity:1;}
.cn-content:active p{opacity:0;}
.cn-content p{line-height:24px;text-shadow:1px 1px 1px rgba(255,255,255,0.9);color:rgba(103,59,77,0.9);padding:15px 20px;margin-bottom:10px;background:rgba(255,255,255,0.96);font-style:italic;border-top:7px solid rgba(103,59,77,0.6);-webkit-transition:opacity 0.3s linear;-moz-transition:opacity 0.3s linear;-o-transition:opacity 0.3s linear;-ms-transition:opacity 0.3s linear;transition:opacity 0.3s linear;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
.cn-back{outline:none;text-indent:-9000px;width:49px;height:42px;background:transparent url(../images/arrow.png) no-repeat center center;position:absolute;top:22px;left:-100px;cursor:pointer;opacity:0;-webkit-transition:all 0.4s ease-in-out 1s;-moz-transition:all 0.4s ease-in-out 1s;-o-transition:all 0.4s ease-in-out 1s;-ms-transition:all 0.4s ease-in-out 1s;transition:all 0.4s ease-in-out 1s;}
.cn-slide:target .cn-back{left:3px;opacity:1;}
.cn-note{text-align:right;font-size:10px;font-style:normal;text-align:right;padding:10px;display:block;font-family:Arial;text-shadow:1px 1px 1px rgba(255,255,255,0.7);}
/* Main Items */
.cn-slide nav a[href="#slide-1"]{background-image:url(../images/1.jpg);}
.cn-slide nav a[href="#slide-2"]{background-image:url(../images/2.jpg);}
.cn-slide nav a[href="#slide-3"]{background-image:url(../images/3.jpg);}
/* Items and sub-items of slide 1*/
.cn-slide nav a[href="#slide-1-1"],#slide-1-1 .cn-content{background-image:url(../images/4.jpg);}
.cn-slide nav a[href="#slide-1-2"],#slide-1-2 .cn-content{background-image:url(../images/5.jpg);}
.cn-slide nav a[href="#slide-1-3"],#slide-1-3 .cn-content{background-image:url(../images/6.jpg);}
.cn-slide nav a[href="#slide-1-4"],#slide-1-4 .cn-content{background-image:url(../images/7.jpg);}
/* Items and sub-items of slide 2*/
.cn-slide nav a[href="#slide-2-1"],#slide-2-1 .cn-content{background-image:url(../images/8.jpg);}
.cn-slide nav a[href="#slide-2-2"],#slide-2-2 .cn-content{background-image:url(../images/9.jpg);}
.cn-slide nav a[href="#slide-2-3"],#slide-2-3 .cn-content{background-image:url(../images/10.jpg);}
.cn-slide nav a[href="#slide-2-4"],#slide-2-4 .cn-content{background-image:url(../images/11.jpg);}
/* Items and sub-items of slide 3*/
.cn-slide nav a[href="#slide-3-1"],#slide-3-1 .cn-content{background-image:url(../images/12.jpg);}
.cn-slide nav a[href="#slide-3-2"],#slide-3-2 .cn-content{background-image:url(../images/13.jpg);}
.cn-slide nav a[href="#slide-3-3"],#slide-3-3 .cn-content{background-image:url(../images/14.jpg);}
.cn-slide nav a[href="#slide-3-4"],#slide-3-4 .cn-content{background-image:url(../images/15.jpg);}
@media screen and (max-width:1060px){.cn-slide-sub nav a{font-size:28px;}
}
@media screen and (max-width:900px){.cn-container h2{font-size:48px;line-height:95px;}
.cn-slide nav a{font-size:38px;}
.cn-slide-sub nav a{width:auto;font-size:36px;display:block;}
.cn-slide-sub nav a:nth-child(odd){margin-right:0px;}
}
分享到QQ
分享到微博
微信扫一扫
