前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS 渐变背景过渡的2种方式

CSS 渐变背景过渡的2种方式

作者头像
上山打老虎了
发布2023-01-30 14:59:50
1.2K0
发布2023-01-30 14:59:50
举报
文章被收录于专栏:Article

By Noxxxx from https://www.noxxxx.com/?post_type=post&p=2136 欢迎分享与聚合,尊重版权,可以联系授权

如果让你实现视频中的渐变色,你会想到用什么方式呢?

最开始我想到的方式是通过切换 css 变量来实现,下面是直接通过切换 background 来实现的,本质上是同一种思路。

See the Pen <a href="https://codepen.io/hjoker/pen/rNradBY"> Generate New Random Hex Color with JavaScript</a> by hjoker (<a href="https://codepen.io/hjoker">@hjoker</a>) on <a href="https://codepen.io">CodePen</a>.

但不巧的是渐变色不支持这种直接替换“变量”的方式,于是我想到了一种比较 Hack 的方法,需要费一点 DOM 节点,实现方式如下:

See the Pen <a href="https://codepen.io/hjoker/pen/xxzMPJQ"> Untitled</a> by hjoker (<a href="https://codepen.io/hjoker">@hjoker</a>) on <a href="https://codepen.io">CodePen</a>.

通过 JS 切换不同 DIVClass 来实现渐变色的切换,✅优点是没有兼容性问题,没啥学习成本和心智负担,通过简单的定位和布局即可实现,在移动端中可用,❌缺点是不够雅观,像一层牛皮藓,也不够现代化,毕竟 CSS 经过这两年的发展已经有很多方便的实现了,因此我尝试学习了一种新方法。

利用 CSS @property 来实现渐变色的过渡动效。

兼容性方面,由于这是一个实验中的功能,所以部分浏览器需要加私有前缀。

具体语法如下:

代码语言:javascript
复制
@property --property-name {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

syntax 的值可以为以下这这些,网上常见的是使用 lengthnumbercolorpercentage 这几个作为 Demo的。

  1. length
  2. number
  3. percentage
  4. length-percentage
  5. color
  6. image
  7. url
  8. integer
  9. angle
  10. time
  11. resolution
  12. transform-list
  13. transform-function
  14. custom-ident (a custom identifier string)

@property 规则提供了一个直接在样式表中注册自定义属性的方式,而无需运行任何 JS 代码,从而扩展了原先那些不支持的样式效果写法,其实这算是一种精细化的表现方式,让开发者自定义变量,来控制像渐变这种多 value 值混合的写法,把原本浏览器的默认(黑盒)行为,变为代码可控。

看一下我的这个例子,通过自定义起始和终止两个颜色变量,以及角度,来实现渐变色的动态切换。

See the Pen Untitled by hjoker (@hjoker) on CodePen.

参考链接: https://web.dev/at-property/ https://developer.mozilla.org/zh-CN/docs/Web/CSS/@property

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年12月21日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档