透明图像弯曲轮廓（非矩形边框）

Question

我想像这样在透明图像上悬停时创建边框动画。

可以用CSS完成吗？

（当然，不创建两个图像-一个不带边框，一个不带边框-并在悬停时更改图像）

我愿意使用一个小型js库，但没有jQuery。

Answer 1

使用drop-shadow css属性（如其他答案所示）来模拟偏移量，需要创建具有所需颜色的较大阴影，然后用具有背景颜色的较窄阴影覆盖它。如果我们想要一个通用的解决方案，该解决方案适用于放置在任何背景上的任何图像，则我们需要利用svg过滤器（有关参考，请参见the documentation on MDN），因为css尚未提供此类功能。它具有非常好的browser coverage（基本上是IE10 +）。我在下面的代码段中创建了此类过滤器。

使用过滤器创建工具通过inkscape创建了示例中嵌入的<filter>节点，然后从保存的.svg文件中提取了该节点。 <filter>节点内的注释指示需要更改哪些参数以调整最终结果的大小和颜色。我还添加了一些背景色来显示效果与背景无关，并创建了轮廓，忽略了源图像（笔记本电脑正下方）上出现的轻微阴影。

如果您需要有关效果组成的更多信息，请在评论中告诉我。

img:hover{
  filter:url(#outline);
}
html {
  background-color: rgb(255, 244, 216);
}

<svg height="0">
    <filter
       style="color-interpolation-filters:sRGB"
       id="outline">
      <feComponentTransfer
         result="result10">
        <feFuncR
           type="identity" />
        <feFuncG
           type="identity" />
        <feFuncB
           type="identity" />
        <feFuncA
           type="gamma"
           tableValues=""
           intercept="10"
           amplitude="10"
           exponent="7"
           offset="0" />
      </feComponentTransfer>
      <!-- change the stdDeviation here for the outer diameter -->
      <feGaussianBlur
         stdDeviation="7"
         in="result10" />
      <feColorMatrix
         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 500 0 "
         result="result2" />
         <!-- change the stdDeviation here for the inner diameter -->
      <feGaussianBlur
         stdDeviation="4"
         in="result10"
         result="result5" />
      <feColorMatrix
         values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 500 0 "
         result="result4" />
         <!-- change the flood-color here the outline color -->
      <feFlood
         result="result1"
         flood-color="rgb(255,165,0)" />
      <feComposite
         in="result2"
         in2="result4"
         operator="out"
         result="result3" />
      <feComposite
         in2="result3"
         operator="in"
         in="result1"
         result="result8" />
         <!-- change the stdDeviation here to smooth out the final outline -->
      <feGaussianBlur
         stdDeviation="0.3"
         result="result6" />
      <feBlend
         mode="overlay"
         in2="SourceGraphic"/>
    </filter>
</svg>
<img src="https://i.stack.imgur.com/tyyKx.png">

Answer 2

您可以考虑使用drop-shadow过滤器来达到类似效果：

.box {
  width:300px;
  height:200px;
  background:url(https://i.stack.imgur.com/tyyKx.png) left/200% 100% no-repeat;
  transition:0.3s;
}

.box:hover {
  filter:drop-shadow(0 0 10px red);
}

<div class="box">

</div>

对于此特定图像，并按照@Mr Lister的建议，您可以执行以下操作：

.box {
  width: 300px;
  height: 200px;
  background: url(https://i.stack.imgur.com/tyyKx.png) left/200% 100% no-repeat;
  transition: 0.3s;
}

.box:hover {
  filter: drop-shadow(5px 0 0px #fff) 
  drop-shadow(0 5px 0 #fff) 
  drop-shadow(-5px 0 0px #fff) 
  drop-shadow(0 -5px 0 #fff) 
  drop-shadow(4px 0 0px #fa2) 
  drop-shadow(0 4px 0 #fa2) 
  drop-shadow(-4px 0 0px #fa2) 
  drop-shadow(0 -4px 0 #fa2);
}

<div class="box">

</div>

Answer 3

drop-shadow() CSS函数将阴影效果应用于输入图像。 在MDN网络文档中详细了解它。

img{
  width:300px;
  height:300px;
  transition:0.2s all;
}
img:hover{
  filter:drop-shadow(4px 0 0px red) drop-shadow(0 4px 0 red) drop-shadow(-4px 0 0px red) drop-shadow(0 -4px 0 red);
}

<img src = "https://i.imgur.com/2oyDKF3.png">

Answer 4

没有一个属性可以直接在图像上执行您想要的操作。您可以通过在图像上放置SVG路径（边界）来进行此操作，并在不透明的情况下在鼠标悬停时显示/隐藏它，而使用svg可以确保在表演中节省一些东西，可惜现在没有其他安全的方法了。

Answer 5

具有明显距离的轮廓

要模仿图像中显示的内容，可以执行此操作...

.laptop {
  margin:50px;
  background:url(https://i.imgur.com/PQcP7AC.png) no-repeat;
  width:400px;
  height:220px;
  transition:0.2s all;
 
}
.laptop:hover{
  filter: drop-shadow(4px 0 0 white) drop-shadow(0 4px 0 white) drop-shadow(-4px 0 0 white) drop-shadow(0 -4px 0 white) drop-shadow(6px 0 0 orange) drop-shadow(0 6px 0 orange) drop-shadow(-6px 0 0 orange) drop-shadow(0 -6px 0 orange);
}

<div class="laptop">

</div>