纹波效果纯CSS透明 [英] Ripple effect pure css transparent

问题描述

我正在尝试创建一个像这样的纯CSS波纹效果: https://codepen.io/finnhvman/pen/jLXKJw

I'm trying to create a pure CSS ripple effekt like this one: https://codepen.io/finnhvman/pen/jLXKJw

除了我想使用透明的白色作为背景色，以便能够在不同背景上使用按钮.我唯一的问题是，波纹效应似乎总是错误的处理方式:单击时背景变为浅色，而不是较浅的圆圈扩展，而扩展的圆圈为较暗的颜色.

Except that I want to use transparent white as background color to be able to use the button on different backgrounds. My only problem is, that the ripple effect always seems to be the wrong way around: instead of a lighter circle expanding, the background becomes light on click and the circle which expands is the darker color.

我的编码如下:

.background{
width: 150px;
display: inline-block;
height: 50px;
background: #0066dd;
padding: 20px;
}

.color2{
background: #6600cc;
}

.button{
    font-size: 24px;
    color: #fff;
    padding: 10px;
    cursor: pointer;
    transition: all 0.8s ease;
    background-position: center;
}

.button:hover{
  background: rgba(255, 255, 255, 0.15) radial-gradient(circle, transparent 1%, rgba(255, 255, 255, 0.15) 1%) center/15000%;
}
    
.button:active{
  background-color: rgba(255, 255, 255, 0.5);
  background-size: 100%;
  transition: background 0s;
}

<div class="background">
<span class="button">Button 1</span>
</div>
<div class="background color2">
<span class="button">Button 2</span>
</div>

如何使效果完全相反?单击时，较浅的白色应从中间开始并扩展到外部.

How can I make the effect the exact opposite way? On-Click the lighter white should start in the middle and expand to the outer.

推荐答案

您可以反转 radial-gradient 中的颜色，该颜色是 .button:hover 规则:

You can reverse the colors in the radial-gradient which is the background of the .button:hover rule:

.background {
  width: 150px;
  display: inline-block;
  height: 50px;
  background: #0066dd;
  padding: 20px;
}

.color2 {
  background: #6600cc;
}

.button {
  font-size: 24px;
  color: #fff;
  padding: 10px;
  cursor: pointer;
  transition: all 0.8s ease;
  background-position: center;
}

.button:hover {
  background: rgba(255, 255, 255, 0.15) radial-gradient(circle, rgba(255, 255, 255, 0.15) 1%, transparent 1%) center/15000%;
}

.button:active {
  background-color: rgba(255, 255, 255, 0.5);
  background-size: 100%;
  transition: background 0s;
}

<div class="background">
  <span class="button">Button 1</span>
</div>
<div class="background color2">
  <span class="button">Button 2</span>
</div>

这篇关于纹波效果纯CSS透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！