免费的QQ技术网,残梦资源网,小刀娱乐网,小高教程网,QQ教程网

网站首页 网页特效 其他特效 正文

css3实现流动的边框效果代码

2017-11-22 其他特效 3942 ℃ 1 评论

css3实现流动的边框效果代码

最近在前端网看到很多人在讨论css3动画和canvas,看到一篇关于css3流动边框的文章,我觉得它适用于个人中心的头像上面,于是便按照案例的思路也写了一遍,demo如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>css3 流动的边框</title>
    <style>
        .avatar{
            background-color: #f2f2f2;
            width: 90px;
            height: 90px;
            display: inline-block;
            margin: 40px;
            position: relative;
            z-index: 3;
        }
        .a1::before, .a2::before, .a2::after{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            border: 2px solid red;
            margin: -5px;
            z-index: -1;
        }
        .a1::before, .a2::before{
            -webkit-animation: lineA 4s linear infinite;
            animation: lineA 4s linear infinite;
        }
        .a2::after{
            -webkit-animation: lineB 4s linear infinite;
            animation: lineB 4s linear infinite;
        }
        @-webkit-keyframes lineA{
            0%,100%{clip:rect(0,100px,2px,0)}
            25%{clip:rect(0,2px,100px,0)}
            50%{clip:rect(98px,100px,100px,0)}
            75%{clip:rect(0,100px,100px,98px)}
        }
        @keyframes lineA{
            0%,100%{clip:rect(0,100px,2px,0)}
            25%{clip:rect(0,2px,100px,0)}
            50%{clip:rect(98px,100px,100px,0)}
            75%{clip:rect(0,100px,100px,98px)}
        }
        @-webkit-keyframes lineB{
            0%,100%{clip:rect(98px,100px,100px,0)}
            25%{clip:rect(0,100px,100px,98px)}
            50%{clip:rect(0,100px,2px,0)}
            75%{clip:rect(0,2px,100px,0)}
        }
        @keyframes lineB{
            0%,100%{clip:rect(98px,100px,100px,0)}
            25%{clip:rect(0,100px,100px,98px)}
            50%{clip:rect(0,100px,2px,0)}
            75%{clip:rect(0,2px,100px,0)}
        }
    </style>
</head>
<body>
    <a class="avatar a1"></a>
    <a class="avatar a2"></a>
</body>
</html>

其中,主要涉及到两个知识点,clip和animation。clip本人用的不多,建议大家看看张鑫旭大神的文章:http://www.zhangxinxu.com/wordpress/2011/04/css-clip-rect/,讲的不错,

Tags:CSS技巧CSS3渐变动画CSS3动画

已有1位网友发表了看法:

  • ANN

    ANN  评论于 [2018-06-19 17:25:24]  回复

    为什么手机端看着线条就不动了

欢迎 发表评论:

网站分类
标签列表
最近发表