34.纯 CSS 创作在文本前后穿梭的边框

最新推荐文章于 2024-07-17 16:26:33 发布

anfuye3276

最新推荐文章于 2024-07-17 16:26:33 发布

阅读量76

点赞数

原文链接：http://www.cnblogs.com/FlyingLiao/p/10348581.html

版权

34.纯 CSS 创作在文本前后穿梭的边框

原文地址： https://segmentfault.com/a/1190000015045700

感想：动画 + z-index:n ;

HTML code：

<div class="warning">ERROR 404</div>

CSS code:

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(20%, 20%, 20%);
}
.warning{
    position: relative;
    padding: 0.6em 0.4em;
    /* border: 1px solid red; */
    /* 定义文字样式 */
    color: whitesmoke;
    font-size: 50px;
    font-family: sans-serif;
    font-weight: bold;
    z-index: 1;
}
/* 用伪元素定义边框尺寸 */
.warning::before,
.warning::after{
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    border: 0.2em solid transparent;
    box-sizing: border-box;
    color: orangered;
    animation: rotating 10s infinite;
}
@keyframes rotating{
    to{
        transform: rotate(360deg);
    }
}
.warning::before{
    border-top-color: currentColor;
    border-right-color: currentColor;
    /* 使其显示级数降级一点 */
    z-index: -1;
}
.warning::after{
    border-bottom-color: currentColor;
    border-left-color: currentColor;
    /* 加阴影 */
    box-shadow: 0.3em 0.3em 0.3em rgba(20%, 20%, 20%, 0.8);
}