简单的划过动画效果 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" media="screen">
        .border_animation{position:relative;width:272px;height:182px;margin:50px auto; /*border:1px solid black;*/}
        .border_animation .img_wrap{width:270px;height:180px;border:1px solid #eee}
        .border_animation .border_top{position:absolute;height:1px;width:0;font-size:0;background:#000;top:0;left:0;}
        .border_animation .border_right{position:absolute;height:0px;width:1px;font-size:0;background:#000;bottom:0;right:0;}
        .border_animation .border_bootom{position:absolute;height:1px;width:0px;font-size:0;background:#000;right:0;bottom:0;}
        .border_animation .border_left{position:absolute;height:0px;width:1px;font-size:0;background:#000;left:0;top:0;}
    </style>
</head>
<body>
    <div class="border_animation">
        <div class="border border_top"></div>
        <div class="border border_right"></div>
        <div class="border border_bootom"></div>
        <div class="border border_left"></div>
        <div class="img_wrap">
            <a target="_blank" href="#">
                <img width="270" height="180" src="qq.png" />
            </a>
        </div>
    </div>
<script src="jquery.js"></script>
<script>
$(function(){
    $(".border_animation").hover(
        function(){
            $(".border_top").animate({'width':'272px'},500);
            $(".border_right").animate({'height':'182px'},500);
            $(".border_bootom").animate({'width':'272px'},500);
            $(".border_left").animate({'height':'182px'},500);
        },
        function(){
            $(".border_top").animate({'width':'0'},500);
            $(".border_right").animate({'height':'0'},500);
            $(".border_bootom").animate({'width':'0'},500);
            $(".border_left").animate({'height':'0'},500);
        })

});

</script>
</body>
</html>

 

posted @ 2016-11-04 10:35  汪洋是大大的海  阅读(203)  评论(0)    收藏  举报