oridomi实现将照片元素折叠折纸交互效果代码
代码语言：html
所属分类：布局界面
代码描述：oridomi实现将照片元素折叠折纸交互效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
::-moz-selection {
background: #444;
color: #fff;
text-shadow: none;
}
::selection {
background: #444;
color: #fff;
text-shadow: none;
}
a {
color: #333;
}
li {
list-style: none;
}
html {
font-size: 10px;
min-width: 300px;
}
body {
border-top: 4px solid #333;
background-color: #fff;
color: #333;
margin: 0 auto;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
text-align: center;
}
.logo {
font-family: 'Adventor Bold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
display: inline-block;
font-size: 11rem;
background-color: #222;
color: #eee;
padding: 0rem 2rem;
margin-top: 2rem;
letter-spacing: -0.5rem;
line-height: 2;
width: 50%;
min-width: 530px;
white-space: nowrap;
-webkit-transition: background-color 0.2s, color 0.2s;
-moz-transition: background-color 0.2s, color 0.2s;
-o-transition: background-color 0.2s, color 0.2s;
-ms-transition: background-color 0.2s, color 0.2s;
transition: background-color 0.2s, color 0.2s;
}
.logo em {
font-style: normal;
}
.logo sup {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 6rem;
font-weight: 100;
letter-spacing: -0.9rem;
}
.logo:hover .oridomi-content {
background-color: #ff4e49;
background-color: #ff4e4e;
background-color: #eee;
color: #ddd;
}
header {
overflow: hidden;
}
header h2 {
margin: 2.2rem 0;
font-size: 3rem;
letter-spacing: -0.1rem;
font-weight: 200;
}
header h5 {
font-size: 1.6rem;
line-height: 1;
margin-bottom: 3rem;
font-weight: 400;
}
header a {
text-decoration: none;
color: #aaa;
font-weight: bold;
border-bottom: 1px solid #eee;
padding-bottom: 0.2rem;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
-ms-transition: color 0.3s;
transition: color 0.3s;
}
header a:hover {
color: #777;
}
header .button {
margin-bottom: 1rem;
}
#menu {
position: fixed;
text-align: left;
line-height: 1.8;
position: fixed;
font-size: 1.4rem;
top: 2rem;
padding: 1rem;
font-weight: bold;
}
#menu li {
display: block;
}
#menu li ul {
font-size: 0.9em;
text-indent: 1rem;
}
#menu a {
text-decoration: none;
color: #bbb;
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
-o-transition: color 0.2s;
-ms-transition: color 0.2s;
transition: color 0.2s;
}
#menu a:hover {
color: #777;
}
.button {
background-color: #444;
display: inline-block;
color: #fff;
font-size: 1.6rem;
font-weight: bold;
padding: 0.8rem;
cursor: pointer;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-transition: background-color 0.2s, color 0.2s;
-moz-transition: background-color 0.2s, color 0.2s;
-o-transition: background-color 0.2s, color 0.2s;
-ms-transition: background-color 0.2s, color 0.2s;
transition: background-color 0.2s, color 0.2s;
text-decoration: none;
position: relative;
top: 0.2rem;
}
.button:hover {
background-color: #ddd;
color: #666;
}
.button:active {
top: 0.3rem;
}
.warning {
width: 480px;
font-size: 16px;
padding: 40px;
margin: 40px auto;
border: 1px dashed #ff5a7e;
line-height: 1.5;
}
#unsupported {
display: none;
}
section {
margin: 2rem 0;
padding: 2rem;
overflow: hidden;
}
section h1 {
font-size: 3rem;
line-height: 2;
}
p,
pre {
max-width: 60rem;
margin: 2rem auto;
text-align: left;
}
p {
font-size: 1.7rem;
line-height: 1.5;
}
p a {
text-decoration: none;
font-weight: bold;
border-bottom: 1px dotted #ddd;
}
p a:hover {
color: #bbb;
}
p code {
background-color: #f8f8f8;
border: 1px solid #ddd;
-webkit-border-radius: 2px;
border-radius: 2px;
padding: 0.3rem;
font-size: 1.4rem;
}
pre {
background-color: #f8f8f8;
color: #555;
padding: 1rem;
-webkit-border-radius: 3px;
border-radius: 3px;
font-size: 1.3rem;
padding: 0 2rem;
overflow: scroll;
}
code {
padding: 0;
line-height: 1.4;
}
#demos {
margin-top: 0;
}
#demos li {
display: block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin: 2rem;
margin-bottom: 4rem;
}
#demos > h2,
#demos > h3 {
color: #aaa;
font-size: 3rem;
font-weight: 200;
}
#demos > h2 {
padding: 2rem;
}
#demos > h2 a {
text-decoration: none;
color: inherit;
border-bottom: 1px dotted #ddd;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
-ms-transition: color 0.3s;
transition: color 0.3s;
}
#demos > h2 a:hover {
color: #333;
}
#demos > h3 {
font-style: italic;
max-width: 48rem;
font-size: 2rem;
margin: 0 auto;
}
.demo {
display: block;
max-width: 80rem;
width: 100%;
min-width: 320px;
position: relative;
margin: 0 auto;
margin-bottom: 2rem;
}
.label {
background-color: #f8f8f8;
color: #999;
font-family: monospace;
display: inline-block;
padding: 1rem;
font-size: 1.3rem;
-webkit-border-radius: 3px;
border-radius: 3px;
width: 20rem;
position: relative;
}
.demo1 {
font-family: 'Adventor Bold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
height: 30rem;
color: #fff;
background-image: url("//repo.bfw.wiki/bfwrepo/image/5d65eaff5a217.png");
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
font-size: 9rem;
text-transform: uppercase;
font-weight: bold;
letter-spacing: -0.3rem;
line-height: 1;
text-align: center;
padding-top: 4rem;
}
.demo1 p {
text-transform: none;
font-size: 4rem;
background-color: #333;
display: inline-block;
padding: 0.8rem;
font-weight: 100;
letter-spacing: 0;
pointer-events: none;
}
.demo2 {
font-family: 'Abril Fatface', 'Hoefler Text', Constantia, Palatino, Georgia, serif;
color: #333;
background-color: #eee;
font-size: 6rem;
line-height: 0.9;
padding: 6rem 0;
font-weight: normal;
max-width: 50rem;
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
-o-transition: color 0.2s;
-ms-transition: color 0.2s;
transition: color 0.2s;
}
.demo2 h3 {
font-weight: normal;
}
.demo2:hover .oridomi-content {
color: #e2bb7c;
}
.demo3 {
text-transform: uppercase;
background-color: #444;
border: 1.5rem solid #e2bb7c;
color: #e2bb7c;
font-size: 6rem;
padding: 2rem;
}
.demo3 h3 {
font-weight: 100;
}
.demo4 {
background-image: url("//repo.bfw.wiki/bfwrepo/icon/61162b3327ad6.gif");
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
height: 28rem;
font-size: 5rem;
font-family: Futura;
text-transform: uppercase;
font-weight: bold;
color: #fff;
letter-spacing: -0.2rem;
line-height: 5;
}
.demo5 {
background-image: url("//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png");
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
height: 40rem;
}
.demo6 {
background-color: #00bbdf;
max-width: 57rem;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
-ms-transition: background-color 0.2s;
transition: background-color 0.2s;
}
.demo6 pre {
font-size: 1.2rem;
background: none;
color: #fff;
font-weight: bold;
overflow: hidden;
font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
}
.demo6:hover .oridomi-content {
background-color: #aa2861;
}
#features ul {
font-size: 1.8rem;
color: #999;
max-width: 65rem;
margin: 0 auto;
}
#features li {
width: 40%;
display: inline-block;
line-height: 2;
white-space: nowrap;
font-style: italic;
}
#features li:nth-child(odd) {
text-align: right;
margin-right: 4rem;
}
#features li:nth-child(even) {
text-align: left;
margin-left: 4rem;
}
#usage h2 {
font-size: 2rem;
margin-top: 5rem;
}
#initialization {
margin-top: 2rem !important;
}
footer {
padding: 3rem;
font-size: 1.5rem;
color: #bbb;
}
footer a {
color: #bbb;
text-decoration: none;
border-bottom: 1px solid #bbb;
}
@media only screen and (max-width: 900px), only screen and (max-device-width: 480px) {
html {
font-size: 9px;
}
.logo {
width: 100%;
font-size: 9rem;
}
.demo {
width: 90%;
}
#features li {
font-size: 1.7rem;
width: 100%;
text-align: center !important;
margin: 0 auto !important;
}
}
@media only screen and (max-width: 780px) {
#menu {
display: none;
}
}
@media only screen and (max-device-width: 480px) {
.oridomi-content {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
-ms-transition: none !important;
transition: none !important;
}
}
@media only screen and (min-width: 970px) {
#demos li {
width: 35%;
display: inline-block;
}
}
</style>
</head>
<body>
<header>
<h1 class="logo">OriDomi<sup>1.0</sup></h1>
<h2>The web is flat, but now you can fold it up.</h2>
<h5>open source JavaScript library by Dan Motzenbecker </h5>
</header>
<ul id="menu">
<li><a href="#">OriDomi</a></li>
<li><a href="#demos">Demos</a></li>
<li><a href="#features">Features</a></li>
<li>
<a href="#usage">Usage</a>
<ul>
<li><a href="#initialization">Initialization</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#effects">Effects</a></li>
<li><a href="#callbacks">Callbacks</a></li>
<li><a href="#queueing">Queueing</a></li>
<li><a href="#touch">Touch</a></li>
<li><a href="#content-manipulation">Content manipulation</a></li>
<li><a href="#ripple">Ripple</a></li>
<li><a href="#responsive">Responsive</a></li>
<li><a href="#custom">Custom behavior</a></li>
<li><a href="#minutiae">Minutiæ</a></li>
</ul>
</li>
<li><a href="#coda">Coda</a></li>
</ul>
<noscript>
<div class="warning">
Your browser has JavaScript disabled. OriDomi needs JavaScript turned on
to work. Otherwise, all you’ll see here are some flat text and images.
</div>
</noscript>
<div id="unsupported" class="warning">
Sorry, looks like your browser is too old to support OriDomi, so all you’ll see below are some flat images and text. To get the most out of the web, consider upgrading to a browser that supports modern standards. Try
</div>
<section id="demos">
<h2>
Fold the like paper.
</h2>
<h3>
Use your mouse or touch to manipulate these, or press the <b>fold</b> button to see a random effect:
</h3>
<ul>
<li>
<div class="demo demo1">
<h3>Hello.</h3>
<p>from DOM-land</p>
</div>
<div>
<div class="label">accordion(20)</div>
<div class="button" data-n="0">fold</div>
</div>
</li>
<li>
<div class="demo demo5"></div>
<div>
<div class="label">reveal(30)</div>
<div class="button" data-n="4">fold</div>
</div>
</li>
<li>
<div class="demo demo2">
<h3>Late<br>Capitalism</h3>
</div>
<div>
<div class="label">reveal(40)</div>
<div class="button" data-n="1">fold</div>
</div>
</li>
<li>
<div class="demo demo3">
<h3>Tennis<br>Court<br>Oath</h3>
</div>
<div>
<div class="label">accordion(-20)</div>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0