找回密码
当前位置：前端开发者 > CSS > 正文

前端开发 CSS3实现边框环绕动画

2018-07-25 分类：CSS 阅读(2343) 评论(0)

前端开发flex教程|web前端开发必备浏览器|游戏开发转web前端

主要利用伪类以及clip属性实现,可用作按钮特效动画，也可用作按钮hover效果
html 代码片段

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>浏览器内核 前端开发的</title>
</head>
<style>
    @keyframes clipMe {
        0%,
        100% {
            clip: rect(0px, 220.0px, 2px, 0px);
        }
        25% {
            clip: rect(0px, 2px, 220.0px, 0px);
        }
        50% {
            clip: rect(218.0px, 220.0px, 220.0px, 0px);
        }
        75% {
            clip: rect(0px, 220.0px, 220.0px, 218.0px);
        }
    }
    @-webkit-keyframes surround {
        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);
        }
    }
    .aa:before,
    .aa:after {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        content: “”;
        z-index: -1;
        margin: -5%;
        animation: surround linear infinite 8s;
        box-shadow: inset 0 0 0 2px red;
    }
    .aa:before {
        animation-delay: -4s;
    }
    .aa {
        border: 1px solid black;
        position: absolute;
        left: 500px;
        top: 200px;
        margin: auto;
        width: 200px;
        height: 200px;
        margin: auto;
    }
</style>
<body>
    <div class=”aa”></div>
</body>
</html>

gulp前端开发环境|游戏引擎 web前端开发|棋牌游戏前端开发

赞(0)
前端开发者 » 前端开发 CSS3实现边框环绕动画
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论