前端小火龙 2024-03-29 15:46 采纳率: 93.3%
浏览 12
已结题

图片流光描边，给半透明的图片加上动态效果

如果我有一张图片，比方说是一个箭头，如下

img

我怎么用CSS做出这种流光效果，就下面这样

img

  • 写回答

4条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-03-29 15:46
    关注

    引自免费微信小程序：皆我百晓生

    要实现类似图1中的流光效果，我们可以采取以下几种方式：

    1. 内联伪像素（Inline pseudo-elements）:
    * {
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.7));
}

img:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease-in-out;
}

/* 这里需要创建一个伪元素来模拟渐变效果 */
<div id="gradient"></div>

    在这个CSS代码中，我们首先设置了filter属性为drop-shadow，这是一个内联伪元素，其上下文是整个图像。然后，在img:hover伪类中，我们将其 transform 属性设置为scale(1.2)，表示图像会放大1.2倍，从而产生类似于斑驳流动的效果。

    这个变换可以使用滑动插值来实现，即transition属性指定了过渡时间。我们还为滑动过渡设置了0.3秒的时间范围，这将使得渐变从淡变到深的过程更加平滑自然。

    在#gradient伪元素中，我们通过JavaScript创建了一个渐变数组，用于模拟渐变效果。这里的颜色值以RGBA格式提供，这意味着我们有两个不等分的蓝色、一个不等分的绿色和一个不等分的红色点。我们将这些颜色值分别赋给不同的子元素，并根据:hover伪类的触发条件进行改变。

    下面是完整的CSS代码示例，演示如何实现上述所述效果：

    * {
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.7));
}

img:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease-in-out;
}

#gradient {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to right, #FFA600, #FFD800, #FFE400, #ADD8E6);
  position: relative;
}

#gradient::before,
#gradient::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #FFA600;
  transform-origin: bottom center;
  opacity: 0;
  pointer-events: none;
}

/* 将渐变过渡应用于主要元素上 */
img {
  transition: all 0.3s ease-in-out;
}

    现在，当我们打开图1所示的页面并悬停在图片上时，我们会看到像流动的图案效果。随着鼠标移动，图像的颜色将会逐渐过渡，形成交替变化的效果。请注意，由于浏览器可能对CSS动画的支持存在差异，可能在某些现代浏览器（如Chrome、Firefox、Safari）中效果不明显，但应该在大多数主流浏览器上都能正常工作。

    此外，为了保持视觉的平衡和清晰度，我们需要确保.gradient元素始终位于<body>容器的顶部，以避免遮挡图像的部分区域。例如，你可以将#gradient样式添加到<body>部分的style标签中：

    <body style="height: 100vh;">
  <div id="gradient">
    <!-- 图片内容 -->
  </div>
</body>

    如果你想在包含图片的元素外部也创建类似的过渡效果，你可以在结构元素（如<img>或<div>）内部应用一个过渡效果。在这种情况下，<div>中的背景色将是渐变开始和结束的颜色，因此与.gradient元素共享相同的过渡规则。

    这就是使用CSS创建流光效果的基本思路，具体实现可能会因具体的布局、选择器选择和动画要求的不同而有所不同。请根据实际情况调整代码以达到预期效果。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 4月25日
  • 已采纳回答 4月17日
  • 创建了问题 3月29日

悬赏问题

  • ¥30 模拟电路 logisim
  • ¥15 PVE8.2.7无法成功使用a5000的vGPU，什么原因
  • ¥15 is not in the mmseg::model registry。报错，模型注册表找不到自定义模块。
  • ¥15 安装quartus II18.1时弹出此error，怎么解决？
  • ¥15 keil官网下载psn序列号在哪
  • ¥15 想用adb命令做一个通话软件，播放录音
  • ¥30 Pytorch深度学习服务器跑不通问题解决？
  • ¥15 部分客户订单定位有误的问题
  • ¥15 如何在maya程序中利用python编写领子和褶裥的模型的方法
  • ¥15 Bug traq 数据包 大概什么价