当前位置:

css流动的边框效果

本文最后更新于2017-01-06,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

温馨提示:本文共1336个字,读完预计4分钟。

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

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

如果上面的demo看不了或者访问慢,没关系,下面放出了完整的代码,只要复制到html中查看即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<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>

好了,这篇很水,就这样吧… 祝大家新年快乐!

版权申明:本文地址 ,本博客所有文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!

我要说两句

  • 1 条回应
    • 头像
      富婆包男人 发表于

      顶一个!!!!