zoukankan      html  css  js  c++  java
  • 简单边框动画

    在layui论坛上闲逛时发现了一个用css3实现的边框动画,故简单实现了下。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .container{position: relative;width: 200px;height: 100px;line-height: 100px;text-align: center;border: 1px solid #ccc;}
            span{position: absolute;display: inline-block;content: none;width: 0;height: 0;font-size: 0;border: 0;transition: .5s;}
            /*该动画实则是通过四个span标签分别设置边框,然后再增加宽度或者高度来实现的*/
            .top{top: 0;right: 0;border-top: 2px solid #000;}
            .right{bottom: 0;right: 0;border-right: 2px solid #000;}
            .bottom{bottom: 0;left: 0;border-bottom: 2px solid #000;}
            .left{top: 0;left: 0;border-left: 2px solid #000;}
            
            .container:hover .top,.container:hover .bottom{width: 200px;}
            .container:hover .left,.container:hover .right{height: 100px;}
            
            /*animate动画,因为上面运用了transition动画,故下面的动画注释了*/
            /*.top,.bottom{animation: bt .6s infinite ease-in-out;}
            .left,.right{animation: bl .6s infinite ease-in-out}*/
            @keyframes bt{
                from{
                    width: 0;
                }
                25%{
                    width: 50px;
                }
                50%{
                    width: 100px;
                }
                75{
                    width: 150px;
                }
                to{
                    width: 200px;
                }
            }
    
            @keyframes bl{
                from{
                    height: 0;
                }
                25%{
                    height: 25px;
                }
                50%{
                    height: 50px;
                }
                75%{
                    height: 75px;
                }
                to{
                    height: 100px;
                }
            }
        </style>
    </head>
    <body>
        <div class="container">
            KOBE BRYANT
            <span class="top"></span>
            <span class="right"></span>
            <span class="bottom"></span>
            <span class="left"></span>
        </div>
    </body>
    </html>

    也可以看看这篇文章

  • 相关阅读:
    hdu3709(数位dp)
    2012天津E题
    2012天津C题
    hdu1754(splay)
    赤裸裸的splay平衡树
    hdu(预处理+线段树)
    uva11922(强行用rope替代spaly)
    lightoj 1370 欧拉函数
    poj3294 出现次数大于n/2 的公共子串
    poj2774 后缀数组2个字符串的最长公共子串
  • 原文地址:https://www.cnblogs.com/11lang/p/6746467.html
Copyright © 2011-2022 走看看