CSS3效果

leesren

于 2016-01-28 09:42:24 发布

阅读量776

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3 文章标签： css3 html

本文链接：https://blog.youkuaiyun.com/csr0312/article/details/50598552

CSS3 专栏收录该内容

2 篇文章

订阅专栏

环绕旋转

html

<body>
  <div class='bb'></div>
</body>

css

 .bb, .bb::before, .bb::after {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

         .bb {
            width: 200px;
            height: 200px;
            margin: auto;
            background: #009a61;
            color: #009a96;

        }

         .bb::before, .bb::after {
            content: '';
            z-index: -1;
            margin: -5%;
            box-shadow: inset 0 0 0 2px;
            animation: clipMe 8s linear infinite;
            transition:clip 0.3s;
        }

         .bb::before {
            animation-delay: -4s;
        }

        @-webkit-keyframes clipMe {
            0%, 100% {
                clip: rect(0px, 220px, 2px, 0px);
            }
            25% {
                clip: rect(0px, 2px, 220px, 0px);
            } 
            50% {
                clip: rect(218px, 220px, 220px, 0px);
            }
            75% {
                clip: rect(0px, 220px, 220px, 218px);
            }
        }

效果

这里写图片描述