Question

我有一个代码，希望从背景颜色逐渐淡入淡出到重复线性渐变。例如：

:root {
  --blue: #55f ;
  --blue1: #88f ;
  --blue2: #99f ;
  --green: #0a0 ;
}

.some-class {
  color: #fff ;
  display: inline-block ;
  padding: 20px ;
  background-color: var(--green) ;
  border-radius: 0 8px ;
  user-select: none ;
  cursor: pointer ;
  transition: all 0.25s ease ;
}

.some-class:hover {
    background: repeating-linear-gradient(
                45deg, var(--blue), var(--blue) 4px, var(--blue1) 4px, var(--blue2) 8px
    ) ;
   box-shadow: 4px 4px 4px #0004 ;
}

<body>
  <div class="some-class">
    Hover on me!
  </div>
</body>

现在，当您将鼠标悬停时，它没有任何过渡效果，但是当您将鼠标悬停时，它会慢慢过渡为var(--green)颜色。当鼠标进入div时，是否可以添加过渡？

如何在CSS中向重复线性渐变添加过渡？

0 个答案: