16.纯 CSS 创作一个渐变色动画边框

最新推荐文章于 2023-08-25 17:30:44 发布

anfuye3276

最新推荐文章于 2023-08-25 17:30:44 发布

阅读量162

点赞数

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

版权

16.纯 CSS 创作一个渐变色动画边框

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

感想：边框是伪元素::after来的；

HTML代码：

<div class="box">
    you are my<br>
    FAVORIFE
</div>

CSS代码：

html, body,.box {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
body{
    background: #222;
}
.box{
    width: 10em;
    height: 5em;
    border-radius: 0.2em;
    line-height: 1.5em;
    font-size: 2.5em;
    /* 字体系列：无衬线；*/
    font-family: sans-serif;
    color: white;
    background: #111;
    position: relative;
    animation: animate_text 2s linear infinite alternate;
}
@keyframes animate_text{
    from{
        color: lime;
    }
    to{
        color: yellow;
    }
}
/* 用伪圆增加一个背板 */
.box::after{
    content: '';
    position: absolute;
    width: 102%;
    height: 104%;
    background-image: linear-gradient(60deg, aquamarine, cornflowerblue, goldenrod, hotpink, salmon, lightgreen, sandybrown, violet);
    background-size: 300%;
    border-radius: 0.2em;
    z-index: -1;
    animation: animate_bg 5s infinite;
}
@keyframes animate_bg{
    0%{
        background-position: 0%, 50%;
    }
    50%{
        background-position: 100%, 50%;
    }
    100%{
        background-position: 0%, 50%;
    }
}