Question

如何合并javascript来使该按钮动画化？我可以使用CSS（变色）部分，但不能使用动画气泡部分。 https://codepen.io/Grsmto/pen/RPQPPB

style.css和script.js与index.html位于同一文件夹中

这是我的index.html的样子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet" media="screen">

</head>
<body>                              

<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="goo">
  <defs>
    <filter id="goo">
      <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 19 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo"/>
    </filter>
  </defs>
</svg>

<span class="button--bubble__container">
  <a href="#" target="_blank" class="button button--bubble">
    Click this button
  </a>
  <span class="button--bubble__effect-container">
    <span class="circle top-left"></span>
    <span class="circle top-left"></span>
    <span class="circle top-left"></span>

    <span class="button effect-button"></span>

    <span class="circle bottom-right"></span>
    <span class="circle bottom-right"></span>
    <span class="circle bottom-right"></span>
  </span>
</span>
</div>

提前感谢您回答这个基本问题！

动画按钮中的javascript

0 个答案: