悬停效果三
此效果在效果二的基础上扩展为两个渐变动画效果，最初会有两个渐变溢出的元素，默认都不在视野范围内，每一个的宽度为整个元素的一半。当我们鼠标移入的时候修改这两个溢出的元素到可见区域，第一个渐变位于左下角，第二个渐变位于右上角，最后增加高度覆盖到整个元素。
初始CSS代码如下，与效果二的代码几乎相同，唯一的区别就是具有两个不同的位置同时发生动画效果，这里同样用到了百分比的background-position。
.hover-3 { background-image: linear-gradient(#1095c1 0 0), linear-gradient(#1095c1 0 0); background-repeat: no-repeat; background-size: 50% .08em; background-position: -100% 100%, 200% 0; transition: background-size .3s, background-position .3s .3s; } .hover-3:hover { background-size: 50% 100%; background-position: 0 100%, 100% 0; transition: background-size .3s .3s, background-position .3s; }
接下来开始优化代码，background复合写法，自定义属性以及calc()进一步整理，这里新增了一个额外的--c自定义属性，因为在background中用到了两次。
.hover-3 { --c: no-repeat linear-gradient(#1095c1 0 0); background: var(--c) calc(-100% + var(--p, 0%)) 100% / 50% var(--p, .08em), var(--c) calc( 200% - var(--p, 0%)) 0 / 50% var(--p, .08em); transition: .3s var(--t, 0s), background-position .3s calc(.3s - var(--t, 0s)); } .hover-3:hover { --p: 100%; --t: 0.3s; }
接下来使用开关变量进一步优化，只有一个变量--i
.hover-3 { --c: no-repeat linear-gradient(#1095c1 0 0); background: var(--c) calc(-100% + var(--i, 0) * 100%) 100% / 50% calc(100% * var(--i, 0) + .08em), var(--c) calc( 200% - var(--i, 0) * 100%) 0 / 50% calc(100% * var(--i, 0) + .08em); transition: .3s calc(var(--i, 0) * .3s), background-position .3s calc(.3s - var(--i, 0) * .3s); } .hover-3:hover { --i: 1; }
悬停效果四
这个效果相对于上面的难度较大，更多的用到了圆锥渐变和更多的计算。主要可以分为以下几个步骤：
- 有左右两个圆锥渐变在元素可视区外
- 鼠标移入增加两个圆锥渐变的宽度，直到覆盖元素
- 改变整个背景区域的位置，这也是最重要的步骤
- 改变后的位置，因为两个圆锥渐变是同一个颜色，所以视觉上没有任何变化
- 鼠标移出减小圆锥渐变的宽度，则可以看到反差后的动画
两个渐变都需要有默认的0宽度和两倍的元素高度（0% 200%），每个渐变的配置如下图所示：
background-image: conic-gradient(from -135deg at 100% 50%, var(--c) 90deg, #0000 0), conic-gradient(from -135deg at 1.2em 50%, #0000 90deg, var(--c) 0);
视觉上，每个渐变的宽度都是元素的一半，但是实际上并不止，因为有锥形的空隙。所以需要在一半宽度的基础上额外增加一定的数值，这个值可以大一点，以便覆盖到整个元素。
.hover-4:hover { background-size: calc(50% + .6em) 200%; }
优化后的代码如下：
.hover-4 { --c: #1095c1; line-height: 1.2em; background: conic-gradient(from -135deg at 100% 50%, var(--c) 90deg, #0000 0) 0 var(--p, 0%) / var(--s, 0%) 200% no-repeat, conic-gradient(from -135deg at 1.2em 50%, #0000 90deg, var(--c) 0) 100% var(--p, 0%) / var(--s, 0%) 200% no-repeat; transition: .4s, background-position 0s; } .hover-4:hover { --p: 100%; --s: calc(50% + .6em); }
总结
以上总共分析了四种悬停效果，虽然效果不同，但主要都用到了 CSS background属性、自定义属性和calc()，不同的组合情况制作出来不同的效果，但是最后的代码都是类似，最终有了极其简洁可维护的代码。基于此，这只是冰山一角，现代CSS的强大还可以产出各种神奇的效果。你是否有想法来试试呢~
看到最后如果觉得有用，点赞，关注，收藏起来吧，说不定哪天就用上啦~
码上掘金
参考
dry-switching-with-css-variables-the-difference-of-one-declaration
using-percentage-values-with-background-position-on-a-linear-gradient
cool-hover-effects-using-background-properties
我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。
