重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇文章给大家分享的是有关使用CSS3怎么实现颜色渐变效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
10年积累的成都网站建设、网站设计经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有矿区免费网站建设让你可以放心的选择与我们合作。Animate.css
.site__title { color: #f35626; background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: hue 60s infinite linear; }
.butt { border: 2px solid #f35626; line-height: 1.375; padding-left: 1.5rem; padding-right: 1.5rem; font-weight: 700; color: #f35626; cursor: pointer; -webkit-animation: hue 60s infinite linear; }
以及一段很重要的代码
@-webkit-keyframes hue { from { -webkit-filter: hue-rotate(0deg); } to { -webkit-filter: hue-rotate(-360deg); } }
重点部分就在于-webkit-animation
,实际上animate库基本都是用的这种方式实现各种动画的。
-webkit-animation: hue 60s infinite linear;
这里定义了一个名为hue的动画名,第二个参数设置动画持续时间为60s,第三个指定动画播放次数无限次,第四个设置速度变化(从头到尾速度相同)。
CSS动画也是采用的关键帧的方法,下面的那一段就是在定义头尾的关键帧,让这个动画真正的动起来!
from { ... } to { ... }
就是说从开头(0%)到结尾(100%)分别是什么状态!再结合-webkit-animation
第四个参数的速度变化,让他更合理的动起来!
-webkit-filter我也不知道什么意思,查查W3C怎么讲的吧。
filter 属性定义了元素(通常是)的可视效果(例如:模糊与饱和度)。
用来调整可视效果?不明觉厉。再看看属性hue-rotate()是什么意思:
给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有较大值,超过360deg的值相当于又绕一圈。
色相旋转??懂了好像又没懂?作为前端工程师,基本的色彩原理还是要知道的:
这就是色相环,这里是24种代表颜色,实际在屏幕上可以显示的RGB颜色有16万种。就是说,上面的颜色变化,在一分钟内有16万种变化……
上面可以很明显的知道这是一个圆环,hue-rotate()就定义了当前颜色在这个圆环上的偏转角度。
颜色变化大概就是这么多了,现在自己实现一下吧:
Document 颜色渐变动画
以上就是使用CSS3怎么实现颜色渐变效果,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。