• 简单的划过动画效果


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css" media="screen">
            .border_animation{position:relative;272px;height:182px;margin:50px auto; /*border:1px solid black;*/}
            .border_animation .img_wrap{270px;height:180px;border:1px solid #eee}
            .border_animation .border_top{position:absolute;height:1px;0;font-size:0;background:#000;top:0;left:0;}
            .border_animation .border_right{position:absolute;height:0px;1px;font-size:0;background:#000;bottom:0;right:0;}
            .border_animation .border_bootom{position:absolute;height:1px;0px;font-size:0;background:#000;right:0;bottom:0;}
            .border_animation .border_left{position:absolute;height:0px;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>
  • 相关阅读:
    fort循环
    while
    函数和数组
    case
    init进程
    权限安全:堡垒机部署实践
    tcp首部当中seq和ack的增长规律
    VRRP
    MSTP
    字符集专题
  • 原文地址:https://www.cnblogs.com/wysdddh/p/6029350.html
Copyright © 2020-2023  润新知