下边是一个图片的效果展示
原始图片效果：
中间效果图：
这个效果就是一块透明方块从从原本图片的上方划过~
代码如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>表层隐动</title> <style> #img{width: 400px;height: 400px;}.grid {position: relative;clear: both;margin: 0 auto;max-width: 1000px;list-style: none;text-align: center;}.grid figure {position: relative;overflow: hidden;margin: 10px 0;height: auto;text-align: center;cursor: pointer;border: solid 7px #dbdbdb;}.grid figure img {position: relative;display: block;width: 100%;opacity: 0.8;}.grid figure figcaption {padding: 7em;color: #fff;text-transform: uppercase;font-size: 1.25em;-webkit-backface-visibility: hidden;backface-visibility: hidden;}.grid figure figcaption::before,.grid figure figcaption::after {pointer-events: none;}.grid figure figcaption,.grid figure figcaption > a {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.grid figure figcaption > a {z-index: 1000;text-indent: 200%;white-space: nowrap;font-size: 0;opacity: 0;}.grid figure h3 {word-spacing: -0.15em;font-size: 1.5em;margin-top: 18%;color: #FFF;font-weight: 600;}.grid figure h2 span {font-weight: 800;}figure.effect-apollo img {opacity: 0.95;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: scale3d(1.05,1.05,1);transform: scale3d(1.05,1.05,1);}figure.effect-apollo figcaption::before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);content: '';-webkit-transition: -webkit-transform 0.6s;transition: transform 0.6s;-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0); }figure.effect-apollo:hover img {opacity: 0.6;-webkit-transform: scale3d(1,1,1);transform: scale3d(1,1,1);}figure.effect-apollo:hover figcaption::before {-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);}figure.effect-apollo:hover p { opacity: 1; -webkit-transition-delay: 0.1s; transition-delay: 0.1s;} </head> <body> <div id="img"> <div class="grid"> <figure class="effect-apollo"> <img src="../images/g3.jpg" alt="" /> <figcaption></figcaption> </figure> </div> </div> </body> </html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
