图片与文字悬浮立体效果怎么做

图片与文字组合的立体效果css怎么实现 如上图所示的效果 html代码   <h1>Amber Heard</h1> <img src=”https://s-media-cache-ak0.pinimg.com/736x/06/d1/5f/06d15fc8a69e2ab67143e5357a4184d7.jpg” /> <div class=”glow-wrap”></div>   <a id=”author” href=”http://tiagoalexandrelopes.com/” target=”_blank” rel=”noopener”>About me</a>   CSS代码 .snip1325 { position: relative; overflow: hidden; margin: 10px; min-width: 255px; max-width: 315px; height: 220px; width: 100%; box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); } .snip1325 img { height: 100%; position: absolute; right: 0; -webkit-transition: all 2s ease-out; transition: all 2s ease-out; } .snip1325:hover img, .snip1325.hover img { -webkit-transform: translateX(130px); transform: translateX(130px); } /* Demo purposes only */ body { background-color: #212121; }   JS代码 /* Demo purposes only */ $(“.hover”).mouseleave( function () { $(this).removeClass(“hover”); } );

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 图片与文字悬浮立体效果怎么做
分享到:
赞(0)
广告位820*80