cssanimation效果(使用CSS transition和animation改变渐变状态的实现方法)
cssanimation效果
使用CSS transition和animation改变渐变状态的实现方法到目前为止,CSS的渐变属性 linear-gradient 和 radial-gradient 已经是很成熟的CSS特性了,而且 repeating-linear-gradient 和 conic-gradient 也越来越成熟。CSS渐变特性对于我们的帮助已经非常强大了,它们可以帮助我们绘图、 创建图片占位符 、制作环形进度条等等。另外还可以通过 transition 和 animation 让渐变动起来。
但是给渐变添加动画效果目前还有很多极限性,如果不添加额外的元素或其他的渐变属性,有些效果是无法实现的,比如下面这个效果。
不过,在Edge浏览器,使用 @keyframes 就可以实现上图的效果,而且代码很简单:
html { background: linear-gradient(90deg, #f90 0%, #444 0) 50%/ 5em; animation: blinds 1s ease-in-out infinite alternate; } @keyframes blinds { to { background-image: linear-gradient(90deg, #f90 100%, #444 0); } }
在些基础上,借助CSS的处理器,比如Sass,可以让上面的代码变得更为灵活:
@function blinds($open: 0) { @return linear-gradient(90deg, #f90 $open*100%, #444 0); } html { background: blinds() 50%/ 5em; animation: blinds 1s ease-in-out infinite alternate; } @keyframes blinds { to { background-image: blinds(1) } }
虽然上面的代码实现了所需的效果,但使用CSS来维护和使用仍然还是需要编写代码,这是事实。动画效果也只是停留在 0% 到 100% 之间,能达到我们所要的效果。不过,要是使用 0 或 0px 来替代 0% 的话,结果就会令人失望,动画效果失踪了。更不用说在Chrome和Firefox浏览器上了,能看到的仅仅就是 #f90 到 #444 两个颜色之间的切换,根本没有停止位置的动效。
庆幸折是,现在我们有一个更好的选择: CSS自定义属性 !
虽然我们可以获得过 transition 效果(但不是 animation 效果),但是如果我们使用的属性是可动画化的,那么CSS自定义属性是不可动画化。比如,当在 transfrom 中使用时,我们可以在 transition 中使用 transfrom 属性。
让我们来做一个效果,复选框选中时,橙色正方形( .box )将会移动并且会被压扁的效果。我们在 .box 中定义了一个自定义属性 --f ,并且初始值设置为 1 :
.box { --f: 1; transform: translate(calc((1 - var(--f)) * 100vw)) scalex(var(--f)); }
当复选框被选中时 :checked , .box 的自定义属性 --f 的值变成 .5 :
:checked ~ .box { --f: .5 }
在 .box 中添加 transition 属性,我们可以让 .box 从一个状态到另一个状态时,整个过程是一种细腻的滑动效果。
.box { --f: 1; transform: translate(calc((1 - var(--f)) * 100vw)) scalex(var(--f)); transition: transform .3s ease-in; }
总结
以上所述是小编给大家介绍的使用CSS transition和animation改变渐变状态的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- cssanimation效果(使用CSS transition和animation改变渐变状态的实现方法)
- css3过渡动画制作(CSS3中动画属性transform、transition和animation属性的区别)
- CSS3 transition过渡效果
- 越难春卷(越难春卷皮怎么用)
- 休闲VS新古典 办公家居简约设计(办公家居简约设计)
- 15个新成 园 位置公布 深圳龙岗2022年共建花园建设又有大动作(15个新成园位置公布)
- 记者手记 书记带我去 巡街(记者手记书记带我去)
- 富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元 | 美通社(富士胶片集团将向土耳其东南部地震灾民捐赠5000万日元)
- 二次创业 的富士胶片,在进博会上首次展示完成转型后的全线医疗产品(二次创业的富士胶片)
热门推荐
- css3实现凸起效果(CSS3轻松实现圆角效果)
- sql表更新关联语句(SQL update 多表关联更新的实现代码)
- mysql安装详解(MySQL Router的安装部署)
- filezilla服务器支持断点续传吗(Filezilla Server配置FTP服务器提示操作超时的解决办法)
- php添加数据到mysql数据库(PHP通过代码连接XAMPP数据库及MySQL数据库方法)
- html5+canvas动画(解析html5 canvas实现背景鼠标连线动态效果代码)
- docker装redis(通过Docker部署Redis 6.x集群的方法)
- dedecmsv5.7后台路径查找(dedecms 取消服务器/主机空间目录脚本的执行权限方法[图文])
- Visual Studio中 sln 和 suo 文件
- mysql分区表的优缺点(MySQL数据表分区策略及优缺点分析)