순수 CSS를 사용하여 마우스 클릭 시 물 파급 효과를 구현하는 단계

순수한 CSS를 사용하여 마우스 클릭 물 파급 효과를 구현하는 단계에는 특정 코드 예제가 필요합니다.

마우스 클릭 물 파급 효과는 웹 개발에서 일반적인 인터랙티브 효과 중 하나이며 사용자에게 더욱 생생한 경험을 선사할 수 있습니다. . 이 기사에서는 순수 CSS를 사용하여 이 효과를 얻는 방법을 공유하고 구체적인 코드 예제를 제공합니다.

구현 단계는 다음과 같습니다.

1단계: HTML 구조

먼저 HTML 파일에 마우스 클릭 효과가 있는 요소를 만듭니다. <div> 요소를 컨테이너로 사용하고 CSS에서 스타일 지정을 위한 클래스 이름을 설정할 수 있습니다. <code><div>元素作为容器，并设置一个类名，以便在CSS中进行样式设置。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:html;toolbar:false;'>&lt;div class=&quot;ripple-container&quot;&gt; &lt;button class=&quot;ripple-button&quot;&gt;Click me&lt;/button&gt; &lt;/div&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><p>步骤2：CSS样式设置</p><p>接下来，在CSS文件中设置<code>ripple-container和ripple-button类的样式。我们将ripple-container类设置为相对定位，用于容纳水波纹效果。同时，ripple-button类应设置为绝对定位，以确保效果在按钮内部展示。

.ripple-container {
  position: relative;
  display: inline-block;
}

.ripple-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 24px;
  background-color: #44a1ff;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

步骤3：定义水波纹效果

使用::after伪元素和animation属性来定义水波纹效果。我们将水波纹设置为圆形，并设置动画效果为从内到外逐渐扩大。另外，我们还需要设置水波纹的颜色和持续时间。

.ripple-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  animation: rippleEffect 1s ease-out;
}

@keyframes rippleEffect {
  0% {
    width: 0;
    height: 0;
    opacity: 0.4;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

步骤4：绑定点击事件

最后，在JavaScript文件中为按钮元素绑定点击事件。当鼠标点击按钮时，将添加一个.ripple

const button = document.querySelector('.ripple-button');

button.addEventListener('click', function(e) {
  // 只有当水波纹动画结束后，我们才会添加动画类
  if (!button.classList.contains('ripple')) {
    button.classList.add('ripple');
    setTimeout(function(){
      button.classList.remove('ripple');
    }, 1000);
  }
});

2단계: CSS 스타일링

다음으로 CSS 파일에서 ripple-container 및 ripple-button 클래스의 스타일을 설정합니다. 물 파문 효과를 수용하기 위해 ripple-container 클래스를 상대 위치로 설정했습니다. 동시에 효과가 버튼 내부에 표시되도록 하려면 ripple-button 클래스를 절대 위치로 설정해야 합니다.

rrreee

3단계: 물 파급 효과 정의🎜🎜::after 의사 요소와 animation 속성을 ​​사용하여 물 파급 효과를 정의합니다. 물의 잔물결을 원형으로 설정하고 안쪽에서 바깥쪽으로 점차 확장되도록 애니메이션을 적용했습니다. 또한 물 잔물결의 색상과 지속 시간도 설정해야 합니다. 🎜rrreee🎜4단계: 클릭 이벤트 바인딩 🎜🎜마지막으로 클릭 이벤트를 JavaScript 파일의 버튼 요소에 바인딩합니다. 마우스가 버튼을 클릭하면 .ripple 클래스가 추가되어 물 파급 효과를 트리거합니다. 🎜rrreee🎜이 시점에서 우리는 순수한 CSS를 사용하여 마우스 클릭 시 물 파급 효과를 얻기 위한 모든 단계를 완료했습니다. 위의 코드를 추가하고 브라우저에서 HTML 파일을 열면 버튼을 클릭하면 마우스 클릭 시 물 파급 효과가 나타나는 것을 볼 수 있습니다. 🎜🎜이 기사가 마우스 클릭 시 물 파급 효과를 얻는 데 도움이 되기를 바랍니다. 궁금한 점이나 의문 사항이 있으면 언제든지 피드백을 보내주세요. 🎜