CSS终于支持渐变色的过渡了🎉
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<div>
<div>
<h2 data-id="heading-0">背景</h2>
<p>在做项目时，总会遇到UI给出渐变色的卡片或者按钮，但在做高亮的时候，由于没有过渡，显得尤为生硬。</p>
<h2 data-id="heading-1">过去的解决方案</h2>
<p>在过去，我们如果要实现渐变色的过渡，通常会使用如下几种方法：</p>
<ol>
<li>添加遮罩层，通过改变遮罩层的透明度做出淡入淡出的效果，实现过渡。</li>
<li>通过<code>background-size/position</code>使得渐变色移动，实现渐变色移动的效果。</li>
<li>通过<code>filter: hue-rotate</code>滤镜实现色相旋转，实现过渡。</li>
</ol>
<p>但这几种方式都有各自的局限性：</p>
<ol>
<li>遮罩层的方式看似平滑，但不是真正的过渡，差点意思。</li>
<li><code>background-size/position</code>的方式需要计算好<code>background-size</code>和<code>background-position</code>，否则会出现渐变不完整的情况。并且只是实现了渐变的移动，而不是过渡。</li>
<li><code>filter: hue-rotate</code>也需要计算好旋转角度，实现复杂度高，过渡的也不自然。</li>
</ol>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</pre>
</div>
<p> </p>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.container {
display: flex;
align-items: center;
}
div {
border-radius: 12px;
}
div + div {
margin-left: 8px;
}
.box1 {
position: relative;
width: 300px;
height: 200px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
overflow: hidden;
}
.box1::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(45deg, #36fd72, #5f1ae0);
opacity: 0;
transition: opacity .8s;
}
.box1:hover::before {
opacity: 1;
}
.box2 {
width: 300px;
height: 200px;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #23b9f5);
background-size: 200% 100%;
transition: background-position .8s;
}
.box2:hover {
background-position: 100% 0;
}
.box3 {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
}
.box3::before {
content: '';
position: absolute;
inset: -50%;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
transition: filter .8s;
}
.box3:hover::before {
filter: hue-rotate(320deg);
}</pre>
</div>
<h2 data-id="heading-2">@property新规则</h2>
<p><code>@property</code>规则可以定义一个自定义属性，并且可以指定该属性的语法、是否继承、初始值等。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">@property --color {
syntax: '<color>';
inherits: false;
initial-value: #000000;
}</pre>
</div>
<p>我们只需要把这个自定义属性<code>--color</code>应用到<code>linear-gradient</code>中，在特定的时候改变它的值，非常轻松就可以实现渐变色的过渡了。</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><div class="box"></div>
</pre>
</div>
<p> </p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">@property --angle {
syntax: '<angle>';
inherits: false;
initial-value: 94.57deg;
}
@property --start-color {
syntax: '<color>';
inherits: false;
initial-value: #e0f2ff;
}
@property --start-percentage {
syntax: '<percentage>';
inherits: false;
initial-value: 7.66%;
}
@property --end-color {
syntax: '<color>';
inherits: false;
initial-value: #b1deff;
}
@property --end-percentage {
syntax: '<percentage>';
inherits: false;
initial-value: 94.53%;
}
.box {
width: 300px;
height: 200px;
background: linear-gradient(
var(--angle),
var(--start-color) var(--start-percentage),
var(--end-color) var(--end-percentage)
);
border-radius: 12px;
transition: --angle .8s, --start-color .8s, --start-percentage .8s, --end-color .8s, --end-percentage .8s;
}
.box:hover {
--angle: 143.85deg;
--start-color: #ffc510;
--start-percentage: 14.66%;
--end-color: #f44433;
--end-percentage: 85.95%;
}</pre>
</div>
<div>
<div>
<p>我们再看看<code>@property</code>规则中这些属性的含义。</p>
<h3 data-id="heading-3">Syntax语法描述符</h3>
<p><code>Syntax</code>用于描述自定义属性的数据类型，必填项，常见值包括：</p>
<ul>
<li><code><number></code> 数字（如0，1，2.5）</li>
<li><code><percentage></code> 百分比（如0%，50%，100%）</li>
<li><code><length></code> 长度单位（如px，em，rem）</li>
<li><code><color></code> 颜色值</li>
<li><code><angle></code> 角度值（如deg，rad）</li>
<li><code><time></code> 时间值（如s，ms）</li>
<li><code><image></code> 图片</li>
<li><code><*></code> 任意类型</li>
</ul>
<h3 data-id="heading-4">Inherits继承描述符</h3>
<p><code>Inherits</code>用于描述自定义属性是否从父元素继承值，必填项：</p>
<ul>
<li><code>true</code> 从父元素继承值</li>
<li><code>false</code> 不继承，每个元素独立</li>
</ul>
<h3 data-id="heading-5">Initial-value初始值描述符</h3>
<p><code>Initial-value</code>用于描述自定义属性的初始值，在<code>Syntax</code>为通用时为可选。</p>
<h3 data-id="heading-6">兼容性</h3>
<p><code>@property</code>目前仍是<strong>实验性规则</strong>，但主流浏览器较新版本都已支持。</p>
</div>
</div>
<p><img src="https://img2024.cnblogs.com/blog/2149129/202604/2149129-20260424105442730-1101164900.png" alt="ScreenShot_2026-04-24_105435_757" loading="lazy"></p>
<div>
<div>
<h2 data-id="heading-7">总结与展望</h2>
<p><code>@property</code>规则的出现，标志着CSS在动态样式控制方面迈出了重要一步。它不仅解决了渐变色过渡的技术难题，更为未来的CSS动画和交互设计开辟了新的可能性。 随着浏览器支持的不断完善，我们可以期待：</p>
<ul>
<li>更丰富的动画效果</li>
<li>更简洁的代码实现</li>
<li>更好的性能表现</li>
</ul>
</div>
</div>
<div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
</div>
<p><em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></p>
</div><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19921404
頁:
[1]