border动画

痛定思痛。 2021-09-12 07:56 280阅读 0赞

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
        </head>
        <style>
            body{
                background: #000;
            }
            .bb{
                position: relative;
                width: 200px;
                height: 200px;
                margin: 100px auto;
            }
            .bb:before,.bb:after{
                content: " ";
                display: block;
                position: absolute;
                width:220px;
                height:220px;
                top: -10px;
                left: -10px;
                border:2px solid #fff;
                z-index:10;
                box-sizing: border-box;
                -webkit-animation: clipAni 4s infinite linear;
            }
            .bb:before{
               -webkit-animation-delay: -2s;
            }
            @keyframes  clipAni{
                0%,100%{
                    clip:rect(0px,220px,220px,217px);
                }
                25%{
                    clip:rect(0px,220px,3px,0px);
                }
                50%{
                    clip:rect(0px,3px,220px,0px);
                }
                75%{
                    clip:rect(217px,220px,220px,0px);
                }            
            }
        </style>
        <body>
            <div class="cont">
                <div class="bb"></div>
            </div>
        </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，280人围观）

还没有评论，来说两句吧...

相关阅读

相关 -webkit-border-radius和-moz-border-radius

这两个都是处理圆角效果的，但不是w3标准的。 w3标准的是border-radius， \-webkit-border-radius 是为了兼容 chrome 或 sa

水深无声/ 2023年10月06日 12:29/ 0 赞/ 11 阅读

相关 border边框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border</title>

男娘i/ 2023年02月16日 12:05/ 0 赞/ 43 阅读

相关 border属性

语法： border-top- style: none | hidden | <关键字> | inherit 边框线的类型：边框线的类型有九个确定值： none

布满荆棘的人生/ 2022年09月03日 07:21/ 0 赞/ 156 阅读

相关 css border table,css table-border

1.table上设边框，td上设边框： table\{border-right:1px solid \F00;border-bottom:1px solid \F00\}

朴灿烈づ我的快乐病毒、/ 2022年09月02日 14:53/ 0 赞/ 168 阅读

相关 border

1、语法 border : border-width || border-style || border-color none：没有边框即忽略所有边

青旅半醒/ 2022年06月14日 05:45/ 0 赞/ 133 阅读

相关 -webkit-border-radius和-moz-border-radius

这两个都是处理圆角效果的，但不是w3标准的。 w3标准的是border-radius， \-webkit-border-radius 是为了兼容 chrome 或 sa

淩亂°似流年/ 2022年06月03日 01:48/ 0 赞/ 137 阅读

相关 border?

border border-top:1px solid \ccc;常用 border-bottom:1px solid \000;常用 border-l

冷不防/ 2022年03月15日 00:16/ 0 赞/ 158 阅读

相关 border:none;以及border:0;的区别！

无边框用border:none还是border:0一直都是一个热议的问题，两者除了在渲染性能上面的差别以外，在标准浏览器中页面表现是没有任何差别的。 border:none表

末蓝、/ 2021年12月03日 11:11/ 0 赞/ 324 阅读

相关 border:none与border:0使用区别

一、border:none border-style的简写在chrome审查元素看到以下结果 element.style { border: non

绝地灬酷狼/ 2021年11月22日 23:00/ 0 赞/ 200 阅读

相关 border动画

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8

痛定思痛。/ 2021年09月12日 07:56/ 0 赞/ 281 阅读