php边框渐变样式,如何使用CSS实现渐变色动画边框的效果（附代码）

本篇文章给大家带来的内容是关于如何使用CSS实现渐变色动画边框的效果(附代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

效果预览

源代码下载

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

代码解读

定义 dom，一个容器中包含一些文字：

you are my

FAVORITE

居中显示：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;

}

用伪元素增加一个背板：.box {

position: relative;

}

.box::after {

content: '';

position: absolute;

width: 102%;

height: 104%;

background-color: orange;

z-index: -1;

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;

}

}

大功告成！

相关推荐：