如何实现从右上角到左下角的linear-gradient线性渐变动画？

问题描述 #

我的代码中，hover状态下linear-gradient的渐变动画呈逆时针方向，请问如何实现从右上角到左下角的直线型渐变动画？

原代码 #

CSS

.boxstyle
{
  background-color:rgba(0,69,255,1);
  background-size: 0% 100%;
  transition: background-color .5s;
  width: 150px;
  height: 150px;
}

.boxstyle:hover
{
  background-image:linear-gradient(to left bottom, rgba(189,41,242,0) 0%, rgba(189,41,242,0) 40%, rgba(189,41,242, 0.9) 100%);
  background-repeat:no-repeat;
  background-size: 200% 100%; 
  transition:background-size 1s, background-color 1s;
}

HTML

<div class="boxstyle">hover it</div>

原效果示意图 #

解决方案 #

只需要调整背景的初始定位和过渡逻辑，就能实现从右上角到左下角的直线型渐变动画，修改后的代码如下：

修改后代码 #

CSS

.boxstyle {
  background-color: rgba(0, 69, 255, 1);
  /* 提前定义渐变，初始定位在右上角，尺寸为0 */
  background-image: linear-gradient(to left bottom, rgba(189, 41, 242, 0) 0%, rgba(189, 41, 242, 0) 40%, rgba(189, 41, 242, 0.9) 100%);
  background-repeat: no-repeat;
  background-position: 100% 0; /* 初始定位在右上角 */
  background-size: 0% 100%;
  transition: background-size 1s, background-color 1s;
  width: 150px;
  height: 150px;
}

.boxstyle:hover {
  background-size: 200% 100%; /* hover时拉伸背景，让渐变从右上角向左下角铺满 */
}

HTML

<div class="boxstyle">hover it</div>

调整说明 #

• 渐变方向to left bottom本身就是从右上角指向左下角的，这个不需要改动；
• 初始状态把渐变背景定位在右上角（background-position: 100% 0），同时设置背景尺寸为0，确保一开始看不到渐变；
• hover时只需要放大背景尺寸，渐变就会从右上角开始，沿着左下方向逐步覆盖整个元素，正好实现你要的直线型动画效果。

内容的提问来源于stack exchange，提问作者user3014233