<!DOCTYPE html>
<html lang="en">
<!--
Copyright (c) 2011 Felix Niklas
This script is freely distributable under the terms of the MIT license.
-->
<head>
<meta charset="utf-8" />
<title>Paperfold CSS</title>
<link href="css/style.css" rel="stylesheet" />
<link href="css/buddycloud.css" rel="stylesheet" />
<link href="css/paperfold.css" rel="stylesheet" />
<script type="text/javascript" src="js/modernizr.custom.71147.js"></script>
<script type="text/javascript" src="js/prefixfree.min.js"></script>
</head>
<body>
<div id="controls">
<h1>Paperfold CSS</h1>
<button id="go" class="highlighted">Open</button>
<h2>Settings</h2>
<div>
<label for="time" class="hasOutput">Time <span id="showTime">0</span></label>
<input id="time" type="range" min="0" max="100" step="1" value="0" />
</div>
<div>
<label for="foldHeight" class="hasOutput">Height Limit<span id="showFoldHeight">200</span></label>
<input id="foldHeight" type="range" min="20" max="400" step="1" value="200" />
</div>
<div>
<label for="perspective" class="hasOutput">3D Perspective<span id="showPerspective">1000</span></label>
<input id="perspective" type="range" min="500" max="4000" step="1" value="1000" />
</div>
<div>
<label for="showHelpers">Show Helpers</label>
<input type="checkbox" id="showHelpers" />
</div>
<div>
<p>Hint: drag to see the effect in 3D space</p>
</div>
</div>
<div class="playground">
<div class="box buddycloud">
<h1>Buddycloud</h1>
<div class="stream">
<article class="topic">
<section class="opener">
<div class="avatar user2"></div>
<div class="postmeta">
<span class="time">3 days</span>
</div>
<span class="name">Vera</span><span class="location">from Campus Library</span>
<p>Pretend. You pretend the feelings are there, for the world, for the people around you.</p>
</section>
<div class="hidden">
<section class="comment">
<div class="avatar user6"></div>
<div class="postmeta">
<span class="time">3 days</span>
</div>
<span class="name">Mona</span><span class="location">from Cafe Extra</span>
<p>Who knows? Maybe one day they will be. I like seafood.</p>
</section>
<section class="comment">
<div class="avatar user7"></div>
<div class="postmeta">
<span class="time">3 days</span>
</div>
<span class="name">Verena</span><span class="location">from Home</span>
<p>Finding a needle in a haystack isn't hard when every straw is computerized. I'm really more an apartment person.</p>
</section>
<section class="comment">
<div class="avatar user12"></div>
<div class="postmeta">
<span class="time">3 days</span>
</div>
<span class="name">Sebastian</span><span class="location">from Passau</span>
<p>I feel like a jigsaw puzzle missing a piece. And I'm not even sure what the picture should be.</p>
</section>
<section class="comment">
<div class="avatar user3"></div>
<div class="postmeta">
<span class="time">3 days</span>
</div>
<span class="name">Tom</span><span class="location">from Island</span>
<p>Who knows? Maybe one day they will be. I like seafood.</p>
</section>
<section class="comment">
<div class="avatar user2"></div>
<div class="postmeta">
<span class="time">3 days</span>
</div>
<span class="name">Vera</span><span class="location">from Munich</span>
<p>Finding a needle in a haystack isn't hard when every straw is computerized. I'm really more an apartment person.</p>
</section>
</div><!-- /hidden -->
<section class="seeMore">
<span>See <span>5</span> More Posts</span>
</section>
<section class="comment">
<div class="avatar user5"></div>
<div class="postmeta">
<span class="time">3 days</span>
</div>
<span class="name">Gero</span><span class="location">from Regensburg</span>
<p>I feel like a jigsaw puzzle missing a piece. And I'm not even sure what the picture should be.</p>
</section>
<section class="comment">
<div class="avatar user11"></div>
<div class="postmeta">
<span class="time">3 days</span>
</div>
<span class="name">Betty</span><span class="location">from Deggendorf</span>
<p>I'm going to tell you something that I've never told anyone before.</p>
</section>
<section class="answer">
<div class="avatar user1"></div>
<textarea placeholder="post a comment..."></textarea>
<div class="controls">
<div class="button small prominent">Post</div>
</div>
</section>
</article>
<article class="topic">
<section class="opener">
<div class="avatar user2"></div>
<div class="postmeta">
<span class="time" title="5:06pm 06.06.2011">5 days</span>
</div>
<span class="name">Vera</span><span class="location">from Home</span>
<p>
Night time - sympathize - I've been working on white lies.
So I'll tell the truth - I'll give it up to you.
And when the day come, it will have all been fun. We'll talk about it soon.
</p>
</section>
<section class="answer">
<div class="avatar user1"></div>
<textarea placeholder="post a comment..."></textarea>
<div class="controls">
<div class="button small prominent">Post</div>
</div>
</section>
</article>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/html5slider.js"></script>
<script type="text/javascript" src="js/paperfold.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
</body>
</html>
新颖别致的CSS 折纸效果源码
4星 · 超过85%的资源 需积分: 11 191 浏览量
2013-06-20
10:58:43
上传
评论 1
收藏 74KB ZIP 举报 
paperfold-css_1333213378_demo_package.zip （15个子文件） 
css 
.DS_Store 6KB buddycloud.css 29KB style.css 4KB paperfold.css 4KB img 
sliderThumb.png 1KB .DS_Store 6KB
index.html 6KB js modernizr.custom.71147.js 8KB html5slider.js 8KB jquery-1.7.1.min.js 92KB .DS_Store 6KB prefixfree.min.js 5KB ui.js 4KB paperfold.js 5KB
Submission Readme.rtf 1KB资源评论
fming3812013-10-21不錯的css摺紙效果 不過有明顯的摺線 克服掉這個問題更棒
