使用CSS transition和animation改变渐变状态的实现方法

网页制作 2024/12/29 佚名

3 1 2

到目前为止，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,transition,css,animation,css渐变状态

风云阁资源网 Design By www.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

风云阁资源网 Design By www.bgabc.com

评论“使用CSS transition和animation改变渐变状态的实现方法”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月29日

使用CSS transition和animation改变渐变状态的实现方法

详解关于flex-shrink如何计算的冷知识

css3绘制百度的小度熊

评论“使用CSS transition和animation改变渐变状态的实现方法”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接