Question

我在创建带有要动画化的渐变内部阴影的框时遇到了麻烦。我尝试使用阴影效果可以给我想要的效果（“发光”和“透明”中心），但不支持渐变。有人知道吗？

我的目标：

到目前为止，我当前的代码：

.grid-element:hover {
  box-shadow:
    inset 0.3rem 0.3rem 0.3rem #CF77F3,
    inset -0.3rem 0.3rem 0.3rem #009BFF,
    inset 0.3rem -0.3rem 0.3rem #2AC9DB;
}

Answer 1

从您的示例中还不能完全清楚您想要实现什么动画。

但是我希望通过一些修改可以对您有所帮助：

.grid-element {
  width: 100px;
  height: 100px;
  animation-name: gradientAnimation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes gradientAnimation {
  0%,
  100% {
    box-shadow: inset 0.3rem 0.3rem 0.3rem #CF77F3,
                inset -0.3rem 0.3rem 0.3rem #009BFF,
                inset 0.3rem -0.3rem 0.3rem #2AC9DB;
  }
  50% {
    box-shadow: inset -0.3rem 0.3rem 0.3rem #009BFF,
                inset 0.3rem -0.3rem 0.3rem #2AC9DB,
                inset 0.3rem 0.3rem 0.3rem #CF77F3
  }
}

<div class="grid-element">
</div>

Answer 2

您可以依靠border-image和blur()过滤器对此进行近似：

.box {
  margin: 20px;
  width: 150px;
  height: 150px;
  position: relative;
  overflow:hidden;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:5px solid transparent;
  border-image:linear-gradient(to bottom left,red,#009BFF,orange) 5;
  filter:blur(5px);
}

body {
 background:#f2f2f2;
}

<div class="box">

</div>

如果要对其进行动画处理，则可以考虑多个背景，可以在其中对位置进行动画处理，但是不会具有透明度：

.box {
  margin: 20px;
  width: 150px;
  height: 150px;
  position: relative;
  overflow:hidden;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:5px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(to bottom left,red,#009BFF,orange) border-box;
  background-size:200% 200%;
  background-position:top right;
  filter:blur(5px);
  animation:change 3s linear infinite alternate;
}

@keyframes change{
  to {
   background-position:bottom left;
  }
}

<div class="box">

</div>

为了具有透明度，我会考虑使用一个额外的元素来构建具有4个伪元素的边框：

.box {
  margin: 20px;
  width: 150px;
  height: 150px;
  position: relative;
  overflow:hidden;
  background-image:
    linear-gradient(to bottom left,pink 40%,blue 40% 60%,orange 60%);
  background-size: 0 0; 
  z-index:0;
}
.box span {
  background-image:inherit;
}
.box:before,
.box:after,
.box span:before,
.box span:after{
  content:"";
  position:absolute;
  z-index:0;
  background-image:inherit;
  background-size:300px 300px;
  filter:blur(5px);
  animation:change3 3s linear infinite alternate;
}
.box:before {
  top:0;
  left:0;
  right:0;
  height:5px; 
  background-position:left center;
}
.box:after {
  bottom:0;
  left:0;
  right:0;
  height:5px; 
  background-position:bottom left;
  animation-name:change1;
}
.box span:before {
  left:0;
  top:0;
  bottom:0;
  width:5px; 
  background-position:bottom left;
  animation-name:change2;
}
.box span:after {
  right:0;
  top:0;
  bottom:0;
  width:5px;
  background-position:bottom center;
}

@keyframes change1{
  to {background-position:center right;}
}
@keyframes change2{
  to {background-position:center top;}
}
@keyframes change3{
  to {background-position:top right;}
}


img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

<div class="box">
<img src="https://picsum.photos/id/37/200/300"/>
<span></span>
</div>

我使用了不同的渐变效果来更好地观看动画。诀窍是在4个元素上使用相同的梯度和相同的尺寸，然后我们不同地移动它们以产生连续移动的错觉。

选中此项以获取有关background-position值的更多详细信息：Using percentage values with background-position on a linear gradient

另一个更简单的想法是考虑clip-path：

.box {
  margin: 20px;
  width: 150px;
  height: 150px;
  position: relative;
  overflow: hidden;
}

.box span {
  filter: blur(5px);
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.box span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to bottom left, pink 40%, blue 40% 60%, orange 60%);
  background-size: 200% 200%;
  background-position: top right;
  animation: change 3s linear infinite alternate;
  clip-path: polygon(0% 0%, 0% 100%, 5px 100%, 5px 5px, calc(100% - 5px) 5px, calc(100% - 5px) calc(100% - 5px), 5px calc(100% - 5px), 5px 100%, 100% 100%, 100% 0%);
}

@keyframes change {
  to {
    background-position: bottom left;
  }
}

img {
  display: block;
  width: 100%;
  height: 100%;
}

<div class="box">
  <img src="https://picsum.photos/id/37/200/300" />
  <span></span>
</div>

如何创建动画渐变内部阴影？

2 个答案: