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

简介:

这里写图片描述

直接上代码: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>
目录
相关文章
|
29天前
鼠标不同方位移入特效
鼠标不同方位移入特效
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
QT 事件过滤器实现鼠标悬浮时两个按钮背景互换
|
前端开发
卡片布局以及鼠标悬浮展示全部
卡片布局以及鼠标悬浮展示全部
109 0
卡片布局以及鼠标悬浮展示全部
9款鼠标划入卡片特效
在线演示 本地下载
715 0
淡入淡出垂直选项卡
在线演示       本地下载
743 0
鼠标拖拽翻页效果
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84192737 ...
976 0
|
C#
WPF无边框拖动、全屏、缩放
原文:WPF无边框拖动、全屏、缩放 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/lwwl12/article/details/78059361 先看效果 无边框 设置WindowStyle=”None”,窗口无关闭及缩放按钮,但还有黑边;设置AllowsTransparency=”True”,黑边没有了。
1994 0
|
Android开发
动画必须有(二):悬浮菜单了解一下!
动画必须有(一): 属性动画浅谈githhub传送门 目录 前言 效果图 FloatingActionButton基础 FloatingActionButton实例 最后 前言 悬浮按钮是我非常喜欢的, 可以把最关键的功能放入到悬浮按钮中.
1037 0