• 难啊难…
  • 七牛的JS SDK 的文档真坑啊.
  • 蓝奏云分享部分地区无法访问需手动修改www.lanzous.com变为:www.lanzoux.com
  • 好气啊~原来使用的CDN服务商莫名其妙的给我服务取消了~
  • 遇见一个沙雕汽车人.
  • 换了证书看看测试一下效果~
  • 煞笔!啥时候开工资?
  • 哪位小垃圾CC我呢?一位来自湖南的小垃圾!反正我流量无限的这样也没意义啊?
  • 测试一哈
  • 丫的Google抓取不到..换CF吧..

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

WEB前端 KIENG 1年前 (2019-09-18) 118616次浏览 已收录 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