oridomi实现将照片元素折叠折纸交互效果代码-html代码-BFW代码库

代码语言：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;
.........完整代码请登录后点击上方下载按钮下载查看