html 代码
- <!doctype html>
- <html lang="zh">
- <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 > 超酷鼠标滑过图片 3D 卡片效果 </title>
- <style>
- <!--normalize.CSS start-->
- article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
- <!--normalize.css end-->
- <!--demo.css start-->
- body, html { font-size: 100%; padding: 0; margin: 0;}
- /* Reset */
- *,
- *:after,
- *:before {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/*/
- .clearfix:before,
- .clearfix:after {
- content: " ";
- display: table;
- }
- .clearfix:after {
- clear: both;
- }
- body{
- background: black;
- color: #D5D6E2;
- font-weight: 500;
- font-size: 1.05em;
- font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
- }
- a{color: #2fa0ec;text-decoration: none;outline: none;}
- a:hover,a:focus{color:#74777b;}
- <!--demo.css end-->
- <!--style.css start-->
- *{box-sizing:border-box}*:after,*:before{box-sizing:border-box}body{line-height:1.8;color:#666}h1,h2,h3,h4,h5,h6{margin:2em 0 1em}a{text-decoration:none;color:#9999ff}.site-content{width:990px;max-width:100%;margin:0 auto}.section-title{text-align:center;text-transform:uppercase}.project{width:100%;width:45%;float:left;margin-right:5%}.project-list:after{content:"";display:block;clear:both}.project__image{display:block;position:relative}.project__image img{width:100%;max-width:100%;display:block}.project__image:after{content:" ";width:100%;height:100%;position:absolute;left:0;top:0;background:linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));transition:opacity 0.3s ease;opacity:0}.project__card{position:relative;will-change:transform;transition:box-shadow 0.3s ease;box-shadow:0 10px 30px transparent}.project__card.hover-in{transition:-webkit-transform 0.2s ease-out;transition:transform 0.2s ease-out;transition:transform 0.2s ease-out, -webkit-transform 0.2s ease-out}.project__card.hover-out{transition:-webkit-transform 0.2s ease-in;transition:transform 0.2s ease-in;transition:transform 0.2s ease-in, -webkit-transform 0.2s ease-in}.project:hover .project__card{box-shadow:0 10px 30px rgba(0, 0, 0, 0.4)}.project:hover .project__image:after{opacity:1}.project:hover .project__detail{border-width:10px;box-shadow:0 10px 30px rgba(0, 0, 0, 0.4)}.project:hover .project__category,.project:hover .project__title{-webkit-transform:translateY(0) scale(1);-ms-transform:translateY(0) scale(1);transform:translateY(0) scale(1);opacity:1}.project__detail{position:absolute;left:30px;right:30px;top:30px;bottom:30px;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;pointer-events:none;-webkit-transform:translateZ(30px);transform:translateZ(30px);border:0 solid #00BCD4;transition:border 0.4s ease}.project__title{margin:0 0 10px;font-size:36px;font-weight:700;transition:0.4s ease;opacity:0;-webkit-transform:translateY(40px) scale(0);-ms-transform:translateY(40px) scale(0);transform:translateY(40px) scale(0);will-change:transform}.project__title a{color:white}.project__category{opacity:0;transition:0.4s ease;transition-delay:0.1s;-webkit-transform:translateY(40px) scale(0);-ms-transform:translateY(40px) scale(0);transform:translateY(40px) scale(0);will-change:transform}.project__category a{color:rgba(255, 255, 255, 0.8);font-size:1.3em}.movie{float:left}.movie-list:after{content:" ";display:block;clear:both}.movie__card{position:relative;width:250px;height:370px}.movie__card.hover-in{transition:0.3s ease-out}.movie__card.hover-out{transition:0.3s ease-in}.movie [class*="layer"]{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:10px}.movie .layer-1{background-image:url("./deadpool-bg.png");background-size:cover}.movie .layer-2{background-image:url("./deadpool.png");background-size:cover;-webkit-transform:translateZ(30px);transform:translateZ(30px)}.movie .layer-3{background-image:url("./deadpool-title.png");background-size:cover;-webkit-transform:translateZ(50px);transform:translateZ(50px)}.movie .shine{border-radius:10px}
- <!--style.css end-->
- </style>
- <!--[if IE]>
- <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
- <![endif]-->
- </head>
- <body>
- <div class="site-content">
- <h2 class="section-title"></h2>
- <div class="project-list">
- <div class="project">
- <div class="project__card">
- <a href=""class="project__image"><img src="//cdn.attach.qdfuns.com/notes/pics/201707/19/110042x7wljmh67ziffe4m.gif"width=600 height=400 alt=""></a>
- <div class="project__detail">
- <h2 class="project__title"><a href="#"> 体育 </a></h2>
- <small class="project__category"><a href="#"> 篮球, 乒乓球, 羽毛球 </a></small>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
- <script type="text/javascript" src="http://www.w2bc.com/upload/201603/13/201603121510/js/jquery.hover3d.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $(".project").hover3d({
- selector: ".project__card",
- shine: true,
- });
- $(".movie").hover3d({
- selector: ".movie__card",
- shine: true,
- sensitivity: 20,
- });
- });
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/43075/40292e0d3c05e676f20b109d25d7e393.html