• 啥时候是个头啊
  • 这特么又是哪个臭弟弟DD我呢?2020-02-12 12:15
  • 难受啊 马飞
  • 曾经自己 像浮萍一样无依
  • 说尼玛发工资还没信呢
  • 快走了…不算今天出除去周日还有5天!\(^o^)/
  • 还有半个月就走了…挺好的.
  • 无聊啊,最近也没啥更新的.
  • 妈的,写之前不说,写完了了你说不行.中途我还问你你说对.你真是中国第一Monkey
  • 沃妮马,过的真快!转眼又上班了.等待十月一.

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

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

美化小记之 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,您需要填写昵称和邮箱!

  • 快速获取昵称
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 你好,这个怎么添加到wp的页眉上呀,和你这样
    神秘人1122020-02-09 12:34 回复 Windows 7 | Chrome 78.0.3904.108