鼠标悬浮 边框动态出来特效

  1. 云栖社区>
  2. 博客>
  3. 正文

鼠标悬浮 边框动态出来特效

cometwo123 2016-01-04 10:55:00 浏览1037
展开阅读全文

这里写图片描述

直接上代码:http://download.csdn.net/detail/cometwo/9388645

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery响应式线条滑出列表特效 - 非凡图库</title>
<script src="js/jquery.min.js"></script>
</head>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
.box { width: 1190px; margin: 0 auto; padding-top: 50px; height: 300px; }
.border_animation { border: 1px solid #eee; width: 220px; height: 260px; float: left; margin-right: 10px; position: relative; }
.border_animation .border_top { position: absolute; height: 1px; width: 0; font-size: 0; background: #666666; top: 0; left: 0; transition: all 0.5s ease-out; }
.border_animation .border_right { position: absolute; height: 0px; width: 1px; font-size: 0; background: #666666; bottom: 0; right: 0; transition: all 0.5s ease-out; }
.border_animation .border_bottom { position: absolute; height: 1px; width: 0px; font-size: 0; background: #666666; right: 0; bottom: 0; transition: all 0.5s ease-out; }
.border_animation .border_left { position: absolute; height: 0px; width: 1px; font-size: 0; background: #666666; left: 0; top: 0; transition: all 0.5s ease-out; }
.eva-switchable-panels img { display: block; }
.box .hover .border_top,.box .hover .border_bottom { width: 220px}
.box .hover .border_left,.box .hover .border_right { height: 260px}
</style>
<body>
<div class="box">
    <div class="border_animation">
            <div class="border_top"></div>
            <div class="border_right"></div>
            <div class="border_bottom"></div>
            <div class="border_left"></div>
            <div>
                <a target="_blank" href="#">
                    <img width="220" height="260" alt="" src="images/123.jpg">
                </a>
            </div>
    </div>
    <div class="border_animation">
            <div class="border_top"></div>
            <div class="border_right"></div>
            <div class="border_bottom"></div>
            <div class="border_left"></div>
            <div>
                <a target="_blank" href="#">
                    <img width="220" height="260" alt="" src="images/123.jpg">
                </a>
            </div>
    </div>
    <div class="border_animation">
            <div class="border_top"></div>
            <div class="border_right"></div>
            <div class="border_bottom"></div>
            <div class="border_left"></div>
            <div>
                <a target="_blank" href="#">
                    <img width="220" height="260" alt="" src="images/123.jpg">
                </a>
            </div>
    </div>
    <div class="border_animation">
            <div class="border_top"></div>
            <div class="border_right"></div>
            <div class="border_bottom"></div>
            <div class="border_left"></div>
            <div>
                <a target="_blank" href="#">
                    <img width="220" height="260" alt="" src="images/123.jpg">
                </a>
            </div>
    </div>
    <div class="border_animation">
            <div class="border_top"></div>
            <div class="border_right"></div>
            <div class="border_bottom"></div>
            <div class="border_left"></div>
            <div>
                <a target="_blank" href="#">
                    <img width="220" height="260" alt="" src="images/123.jpg">
                </a>
            </div>
    </div>
</div>
<script>
    $(function(){
        $(".border_animation").mouseenter(function(){
            $(this).addClass("hover");
        });
        $(".border_animation").mouseleave(function(){
            $(this).removeClass("hover");
        });
    });
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源:<a href="http://www.ffpic.com/" target="_blank">非凡图库</a></p>
</div>
<div style="display:none"><script src="http://s24.cnzz.com/stat.php?id=4273731&web_id=4273731" language="JavaScript"></script><script src="http://s20.cnzz.com/stat.php?id=5240441&web_id=5240441" language="JavaScript"></script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Faca36f9d36d03a04d61c93f28c896386' type='text/javascript'%3E%3C/script%3E"));
</script>
</div>
</body>
</html>

网友评论

登录后评论
0/500
评论
cometwo123
+ 关注