CSS滤镜粘滞效果

2023-11-29 22:57:56

CSS滤镜粘滞融合：提升社交分享按钮的趣味性

在社交网络主导的当今时代，网站和应用程序中的社交分享功能已成为不可或缺的元素。为了打造美观实用的分享按钮，前端开发人员面临着严峻的挑战。本文将探讨一种利用CSS滤镜实现的粘滞融合效果，为分享按钮增添趣味性，从而提升用户体验。

SVG分享按钮

首先，让我们创建一个可以在任何页面中使用的SVG分享按钮。以下代码提供了一个基本的SVG示例：

<svg id="share-button" width="32" height="32" viewBox="0 0 32 32">
  <path d="M16,0C7.163,0,0,7.163,0,16s7.163,16,16,16s16-7.163,16-16S24.837,0,16,0z M16,28c-4.411,0-8-3.589-8-8s3.589-8,8-8s8,3.589,8,8S20.411,28,16,28z M23,14h-2v-4h-4v-2h4v-4h2v4h4v2h-4V14z"/>
</svg>

将其添加到HTML文件中，即可在页面中添加一个简单的分享按钮。

CSS滤镜粘滞融合效果

接下来，我们将使用CSS滤镜创建粘滞融合效果。以下代码示例演示了如何实现这一效果：

#share-button:hover {
  filter: url(#goo);
}

<svg>
  <filter id="goo">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0" />
  </filter>
</svg>

CSS3动画

为了让分享按钮在点击后抖动，我们可以使用CSS3动画。以下代码示例展示了如何实现此效果：

#share-button:active {
  animation: shake 0.5s infinite alternate;
}

@keyframes shake {
  0% {
    transform: translate(-1px, -1px);
  }

  10% {
    transform: translate(1px, 1px);
  }

  20% {
    transform: translate(-2px, -2px);
  }

  30% {
    transform: translate(2px, 2px);
  }

  40% {
    transform: translate(-3px, -3px);
  }

  50% {
    transform: translate(3px, 3px);
  }

  60% {
    transform: translate(-4px, -4px);
  }

  70% {
    transform: translate(4px, 4px);
  }

  80% {
    transform: translate(-5px, -5px);
  }

  90% {
    transform: translate(5px, 5px);
  }

  100% {
    transform: translate(0, 0);
  }
}