圣诞树动画

Question

Arthur

Asked:2020-03-11 22:11:51 +0000 UTC2020-03-11 22:11:51 +0000 UTC 2020-03-11 22:11:51 +0000 UTC

带有 SVG 滤镜的菜单（Goo 效果）

772

有一个在HTML/上实现的菜单CSS。我想出了将它与过滤器一起制作的想法，特别是每个菜单项SVG的“粘度”（Goo ）效果。

1.好例子：

2.使用此效果制作的菜单：

问题：如何正确应用此菜单的过滤器？

1 个回答

Voted

Arthur · Answer 1 · 2020-03-11T22:11:51Z

过滤器SVG是一个相当大的话题。
使用最广泛的一种是<feGaussianBlur/>，它也出现在CSS( filter: blur(N))、<feColorMatrix/>、 <feBlend>、 <feComposite/>、 <feImage/>等 <feMerge/>中。

在这种情况下，我们将使用<feGaussianBlur/>,<feColorMatrix/>和<feComposite/>。

第一步：

让我们从框架开始：

$(".goo-button").on("click", function() {
  $(".goo-button").toggleClass("active");
  $(".goo-button span").toggleClass("active");
  $(".circle").toggleClass("goo-active");
});

* {
  margin: 0;
  padding: 0;
}

a {
  font-size: 1.5em;
  color: #fff;
}

.wrapper {
  position: relative;
  margin: 15px;
}

.goo-button {
  position: relative;
  background-color: #0066ff;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
  transition: ease-out 200ms;
}

.goo-button.active {
  transform: scale(0.8);
}

.goo-menu span {
  position: absolute;
  display: block;
  width: 40px;
  height: 4px;
  background-color: #ffffff;
  margin: 4px;
  transition: all 0.5s;
}

.goo-menu span:first-child {
  top: 26px;
  left: 15px;
}

.goo-menu span:nth-child(2) {
  top: 36px;
  left: 15px;
}

.goo-menu span:nth-child(3) {
  top: 46px;
  left: 15px;
}

.goo-menu span.active:first-child {
  top: 36px;
  transform: rotate(45deg);
}

.goo-menu span.active:nth-child(2) {
  opacity: 0;
  transition: opacity 0.3s;
}

.goo-menu span.active:nth-child(3) {
  top: 36px;
  transform: rotate(-45deg);
}

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4em;
  height: 4em;
  background: #0066ff;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: -1;
  transition: ease-out 200ms;
  cursor: pointer;
}

.c1.goo-active {
  top: 105px;
  left: 20px;
  transition-delay: 0.1s;
}

.c2.goo-active {
  top: 20px;
  left: 105px;
  transition-delay: 0.3s;
}

.c3.goo-active {
  top: 80px;
  left: 80px;
  transition-delay: 0.2s;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="goo-menu">
    <div class="goo-button">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="circle c1"><a href="#"><i class="fa fa-pinterest"></i></a></div>
    <div class="circle c2"><a href="#"><i class="fa fa-facebook"></i></a></div>
    <div class="circle c3"><a href="#"><i class="fa fa-twitter"></i></a></div>
  </div>
</div>

第二步：

现在我们需要使用过滤器本身，但首先是一些理论。

SVG过滤器修改图形对象。每个过滤器元素都包含一组执行特定图形操作的过滤器原语。我们可以将操作的结果用作另一个过滤器的输入，从而为效果创建有限的范围。
使用过滤器的最常见示例<feGaussianBlur/>：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="250">
  <defs>
    <filter id="blurEffect">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5 3" />
      <!--5 - горизонтальное, 3 - вертикальное размытие -->
    </filter>
  </defs>
  <rect x="20" y="20" width="250" height="150" fill="blue" filter="url(#blurEffect)" />  
</svg>

-元素的过滤器HTML以这种方式连接：

.elem{
  -webkit-filter: url("#filter");
  filter: url("#filter");
}

第三步：

在我们弄清楚之后，您可以开始创建“粘性（或粘性）的效果。

在最后一个代码片段中，我们使用了 3 个操作：
1. <feGaussianBlur/>创建模糊
2. <feColorMatrix/>增加 Alpha 通道对比度
3. <feComposite/>内容可见性

$(".goo-button").on("click", function() {
  $(".goo-button").toggleClass("active");
  $(".goo-button span").toggleClass("active");
  $(".circle").toggleClass("goo-active");
});

* {
  margin: 0;
  padding: 0;
}

a {
  font-size: 1.5em;
  color: #fff;
}

.wrapper {
  position: relative;
  margin: 15px;
}


/*Подключаем наши фильтры*/

.goo-menu {
  -webkit-filter: url(#gooEffect");
  filter: url("#gooEffect");
}

.goo-button {
  position: relative;
  background-color: #0066ff;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}

.goo-button.active {
  transform: scale(0.8);
}

.goo-menu span {
  position: absolute;
  display: block;
  width: 40px;
  height: 4px;
  background-color: #ffffff;
  margin: 4px;
  transition: all 400ms;
}

.goo-menu span:first-child {
  top: 26px;
  left: 15px;
}

.goo-menu span:nth-child(2) {
  top: 36px;
  left: 15px;
}

.goo-menu span:nth-child(3) {
  top: 46px;
  left: 15px;
}

.goo-menu span.active:first-child {
  top: 36px;
  transform: rotate(45deg);
}

.goo-menu span.active:nth-child(2) {
  opacity: 0;
  transition: opacity 300ms;
}

.goo-menu span.active:nth-child(3) {
  top: 36px;
  transform: rotate(-45deg);
}

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4em;
  height: 4em;
  background: #0066ff;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: -1;
  transition: ease-out 200ms;
  cursor: pointer;
}

.c1.goo-active {
  top: 105px;
  left: 20px;
  transition-delay: 100ms;
}

.c2.goo-active {
  top: 20px;
  left: 105px;
  transition-delay: 300ms;
}

.c3.goo-active {
  top: 80px;
  left: 80px;
  transition-delay: 200ms;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="goo-menu">
    <div class="goo-button">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <div class="circle c1"><a href="#"><i class="fa fa-pinterest"></i></a></div>
    <div class="circle c2"><a href="#"><i class="fa fa-facebook"></i></a></div>
    <div class="circle c3"><a href="#"><i class="fa fa-twitter"></i></a></div>
  </div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="gooEffect">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feComposite in="SourceGraphic" result="mix"/>
    </filter>
  </defs>
</svg>

PS不要在大面积上使用这些过滤器，因为它们非常耗费资源。

带有 SVG 滤镜的菜单（Goo 效果）

是否可以在 C++ 中继承类 <---> 结构？

这种神经网络架构适合文本分类吗？

为什么分配的工作方式不同？

控制台中的光标坐标

如何在 C++ 中删除类的实例？

点是否属于线段的问题

json结构错误

ServiceWorker 中的“获取”事件

c ++控制台应用程序exe文件[重复]

按多列从sql表中选择

带有 SVG 滤镜的菜单（Goo 效果）

1 个回答

相关问题