应用纯 CSS 创作1个渐变色色动漫边框

日期:2021-03-17 类型:科技新闻 

关键词:小程序开发者工具,小程序在线生成平台,小程序编辑,免费的小程序,微信小程序在哪里

实际效果预览

线上演试

按下右边的“点一下预览”按钮能够在当今网页页面预览,点一下连接能够全屏预览。

https://codepen.io/comehope/pen/odpRKX

可互动视頻实例教程

此视頻是能够互动的,你能够随时中止视頻,编写视頻中的编码。

请用 chrome, safari, edge 开启收看。

https://scrimba.com/c/cmQV7Hd

源码免费下载

当地免费下载

请从 github 免费下载。

https://github.com/comehope/front-end-daily-challenges/tree/master/016-colorful-gradient-animated-border

编码讲解

界定 dom,1个器皿中包括1些文本:

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

垂直居中显示信息:

html,
body,
.box {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

设定网页页面情况色:

body {
    background: #222;
}

设定器皿和文本款式:

.box {
    color: white;
    font-size: 2.5em;
    width: 10em;
    height: 5em;
    background: #111;
    font-family: sans-serif;
    line-height: 1.5em;
    text-align: center;
    border-radius: 0.2em;
}

用伪元素提升1个背板:

.box {
    position: relative;
}

.box::after {
    content: '';
    position: absolute;
    width: 102%;
    height: 104%;
    background-color: orange;
    z-index: ⑴;
    border-radius: 0.2em;
}

把背板设定为渐变色色的:

.box::after {
    /*background-color: orange;*/
    background-image: linear-gradient(60deg, aquamarine, cornflowerblue, goldenrod, hotpink, salmon, lightgreen, sandybrown, violet);
}

为背板设定动漫实际效果:

.box::after {
    background-size: 300%, 300%;
    animation: animate_bg 5s ease infinite alternate;
}

@keyframes animate_bg {
    0% {
        background-position: 0%, 50%;
    }

    50% {
        background-position: 100%, 50%;
    }

    100% {
        background-position: 0%, 50%;
    }
}

最终,再为文本提升变色实际效果:

.box {
    animation: animate_text 2s linear infinite alternate;
}

@keyframes animate_text {
    from {
        color: lime;
    }

    to {
        color: yellow;
    }
}

大获全胜!

专业知识点
 

•z-index https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
•background-image https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
•background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
•background-position https://developer.mozilla.org/en-US/docs/Web/CSS/background-position 
 

总结

以上所述是网编给大伙儿详细介绍的应用纯 CSS 创作1个渐变色色动漫边框,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:CSS中的4种引入方法 返回下一篇:没有了