php边框渐变样式,美化小记之CSS动态渐变色背景样式

CSS

关键属性 linear-gradient

用法和定义

linear-gradient(用角度值指定渐变的方向角度,用于指定渐变的起止颜色,颜色 1 颜色 2....) 函数用于创建一个线性渐变的 "图像"。

为了创建一个线性渐变，你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让 Gecko 去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

代码

div{

background: linear-gradient(90deg, #000000, #2F4F4F, #36648B, #009ACD,#7D26CD,#CD661D,#8B5A00,#5E5E5E);

background-size:1000% 100%;

animation:mymove 20s ease infinite;

-webkit-animation: mymove 20s ease infinite;

-moz-animation: mymove 20s ease infinite;

}

@keyframes mymove{

0% {background-position: 0% 0%; }

20%{background-position: 0% 50%; }

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

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

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

80% {background-position: 50% 0%; }

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

}

示例:

类似于本博客头部效果,博主审美垃圾的很弄不出什么好看的.大家自己改改颜色

演示

~谢谢打赏~

赏