使用CSS实现渐变色动画边框效果的方法 - 行业资讯 - 肥雀云

　　介绍

这篇文章给大家分享的是有关使用CSS实现渐变色动画边框效果的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

效果预览

源代码下载https://github.com/comehope/front-end-daily-challenges/tree/master/016-colorful-gradient-animated-border

代码解读

定义dom,一个容器中包含一些文字:

& lt; div类=癰ox"比; 　　你是my
　　最喜欢的　　& lt;/div>

居中显示:

html, 　　的身体, 　　.box { 　　高度:100%; 　　显示:flex; 　　对齐项目:中心; 　　justify-content:中心; 　　}

设置页面背景色:

身体{ 　　背景:# 222; 　　}

设置容器和文字样式:

。盒子{ 　　颜色:白色; 　　字体大小:2.5 em; 　　宽度:10 em; 　　身高:5 em; 　　背景:# 111; 　　字体类型:无衬线; 　　行高:1.5 em; 　　text-align:中心; 　　border - radius: 0.2 em; 　　}

用伪元素增加一个背板:

。盒子{ 　　位置:相对; 　　} 　　　　{后.box:: 　　内容:& # 39;& # 39;; 　　位置:绝对的; 　　宽度:102%; 　　高度:104%; 　　背景颜色:橙色; 　　z - index: 1; 　　border - radius: 0.2 em; 　　}

把背板设置为渐变色的:

。{后框::/*背景颜色:橙色;*/背景图片:线性渐变(60度,海蓝宝石,cornflowerblue,秋麒麟草,hotpink,鲑鱼,lightgreen,黄褐色,紫); 　　}

为背板设置动画效果:

。{后框:: 　　background-size: 300%、300%; 　　动画:animate_bg 5 s缓解无限备用; 　　} 　　　　@keyframes animate_bg { 　　0% { 　　背景位置:0%、50%; 　　} 　　　　50% { 　　背景位置:100%、50%; 　　} 　　　　100% { 　　背景位置:0%、50%; 　　} 　　}

最后,再为文字增加变色效果:

。盒子{ 　　动画:animate_text 2 s线性无限备用; 　　} 　　　　@keyframes animate_text { 　　从{ 　　颜色:石灰; 　　} 　　　　,{ 　　颜色:黄色; 　　} 　　}

大功告成!

感谢各位的阅读!关于使用CSS实现渐变色动画边框效果的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!