• 说尼玛发工资还没信呢
  • 快走了…不算今天出除去周日还有5天!\(^o^)/
  • 还有半个月就走了…挺好的.
  • 无聊啊,最近也没啥更新的.
  • 妈的,写之前不说,写完了了你说不行.中途我还问你你说对.你真是中国第一Monkey
  • 沃妮马,过的真快!转眼又上班了.等待十月一.
  • 还有1天就是端午节了.过的真快, 在这个公司工作半年啦..
  • 咦~哪个弟弟CC我呢?
  • 简单,简单.我提个思路.
  • 不算今天还有2天就放假了.

美化小记之CSS动态渐变色背景样式

WEB前端 KIENG 3个月前 (09-18) 49285次浏览 已收录 0个吐槽 扫描二维码

美化小记之 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%; }
}

示例:

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

演示


KIENG , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA 4.0协议进行授权
转载请注明原文链接:美化小记之 CSS 动态渐变色背景样式
本文章链接:https://blog.kieng.cn/1598.html
喜欢 (0)
KIENG
关于作者:
一个热衷网络的Man
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 快速获取昵称
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址