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

前端开发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前端开发|棋牌游戏前端开发

» 本文来自:前端开发者 » 《前端开发 CSS3实现边框环绕动画》
» 本文链接地址:https://www.rokub.com/4818.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!