在animate.css寻找自己想要的动态效果,看到标题Animate.css和按钮Animate it的颜色在逐渐变化,觉得蛮有趣的,把控制变化的相关代码扒了下来,自己分析实现一波。
一开始认为使用了js控制颜色逐渐变化,看了看js文件,除了jQuery,就只有一小段用来DOM操作添加更改class的代码。控制颜色变化不可能在这里。联想到animate库只用css来控制动画效果,那多半在css文件里。
变化的两个部分HTML和CSS分别如下
<h1 class="site__title mega">Animate.css</h1> .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; }
<button class="butt js--triggerAnimation">Animate it</button> .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 属性定义了元素(通常是<img>
)的可视效果(例如:模糊与饱和度)。
用来调整可视效果?不明觉厉。再看看属性hue-rotate()是什么意思:
给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。
色相旋转??懂了好像又没懂?作为前端工程师,基本的色彩原理还是要知道的:
这就是色相环,这里是24种代表颜色,实际在屏幕上可以显示的RGB颜色有16万种。就是说,上面的颜色变化,在一分钟内有16万种变化……
上面可以很明显的知道这是一个圆环,hue-rotate()就定义了当前颜色在这个圆环上的偏转角度。
颜色变化大概就是这么多了,现在自己实现一下吧:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .title{ color: #48c0c0; -webkit-animation: hue 5s infinite linear; } @keyframes hue { from { -webkit-filter: hue-rotate(0deg); } to { -webkit-filter: hue-rotate(360deg); } } </style> </head> <body> <h1 class="title">颜色渐变动画</h1> </body> </html>
最终的效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]