关键词：
【中文标题】悬停时的CSS波纹效果？【英文标题】：CSS ripple effect on Hover? 【发布时间】：2018-06-23 12:40:15 【问题描述】：我有一个按钮，我想要一个稍微透明的覆盖层，以便在悬停时“滑过”按钮。
有一种叫做“涟漪效应”的东西，您通常可以通过单击按钮来实现。
喜欢这里：https://codepen.io/tomma5o/pen/zwyKya
HTML：
<div class="container">
<a data-animation="ripple">Click Me</a>
</div>
CSS：
:root
/* if u want to change the color of
* the ripple change this value
*/
--color-ripple: rgba(255,255,255,0.8);
body
background: #36353c;
.container
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 50px;
width: 200px;
margin: auto;
*[data-animation="ripple"]
position: relative; /*Position relative is required*/
height: 100%;
width: 100%;
display: block;
outline: none;:root
/* if u want to change the color of
* the ripple change this value
*/
--color-ripple: rgba(255, 255, 255, 0.8);
body
background: #36353c;
.container
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 50px;
width: 200px;
margin: auto;
*[data-animation="ripple"]
position: relative; /*Position relative is required*/
height: 100%;
width: 100%;
display: block;
outline: none;
padding: 20px;
color: #fff;
text-transform: uppercase;
background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
box-sizing: border-box;
text-align: center;
line-height: 14px;
font-family: roboto, helvetica;
font-weight: 200;
letter-spacing: 1px;
text-decoration: none;
box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3);
cursor: pointer;
/*border-radius: 50px;*/
-webkit-tap-highlight-color: transparent;
*[data-animation="ripple"]:focus
outline: none;
*[data-animation="ripple"]::selection
background: transparent;
pointer-events: none;
padding: 20px;
color: #fff;
text-transform: uppercase;
background: linear-gradient(135deg, #e570e7 0%,#79f1fc 100%);
box-sizing: border-box;
text-align: center;
line-height: 14px;
font-family: roboto, helvetica;
font-weight: 200;
letter-spacing: 1px;
text-decoration: none;
box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3);
cursor: pointer;
/*border-radius: 50px;*/
-webkit-tap-highlight-color: transparent;
*[data-animation="ripple"]:focus
outline: none;
*[data-animation="ripple"]::selection
background: transparent;
pointer-events: none;
JS：
const isMobile = window.navigator.userAgent.match(/Mobile/) && window.navigator.userAgent.match(/Mobile/)[0] === "Mobile";
const event = isMobile ? "touchstart" : "click";
const button = document.querySelectorAll('*[data-animation="ripple"]'),
container = document.querySelector(".container");
for (var i = 0; i < button.length; i++)
const currentBtn = button[i];
currentBtn.addEventListener(event, function(e)
e.preventDefault();
const button = e.target,
rect = button.getBoundingClientRect(),
originalBtn = this,
btnHeight = rect.height,
btnWidth = rect.width;
let posMouseX = 0,
posMouseY = 0;
if (isMobile)
posMouseX = e.changedTouches[0].pageX - rect.left;
posMouseY = e.changedTouches[0].pageY - rect.top;
else
posMouseX = e.x - rect.left;
posMouseY = e.y - rect.top;
const baseCSS = `position: absolute;
width: $btnWidth * 2px;
height: $btnWidth * 2px;
transition: all linear 700ms;
transition-timing-function:cubic-bezier(0.250, 0.460, 0.450, 0.940);
border-radius: 50%;
background: var(--color-ripple);
top:$posMouseY - btnWidthpx;
left:$posMouseX - btnWidthpx;
pointer-events: none;
transform:scale(0)`
var rippleEffect = document.createElement("span");
rippleEffect.style.cssText = baseCSS;
//prepare the dom
currentBtn.style.overflow = "hidden";
this.appendChild(rippleEffect);
//start animation
setTimeout( function()
rippleEffect.style.cssText = baseCSS + `transform:scale(1); opacity: 0;`;
, 5);
setTimeout( function()
rippleEffect.remove();
//window.location.href = currentBtn.href;
,700);
)
是否有可能实现类似的东西而无需单击按钮而只需将鼠标悬停在它上面？
【问题讨论】：
hmm 你想让波纹的原点在鼠标进入的任何地方吗？还是一个固定的、居中的原点？ 我编辑了答案以获得更接近原始效果的效果。请检查这是否适合您；） 【参考方案1】：替换 JS 的第 2 行：
const event = isMobile ? "touchstart" : "click";
与：
const event = isMobile ? "touchstart" : "mouseover";
这样就可以了。
希望有帮助！
【讨论】：
【参考方案2】：如果您希望波纹原点固定（例如从中间）而不是从鼠标进入的任何地方，答案要简单得多并且不需要 javascript：只需堆叠一个半透明的圆形伪元素并为比例设置动画悬停时。
body
background: #36353c;
.container
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 50px;
width: 200px;
margin: auto;
.ripple
position: relative; /*Position relative is required*/
height: 100%;
width: 100%;
display: block;
outline: none;
padding: 20px;
color: #fff;
text-transform: uppercase;
background: linear-gradient(135deg, #e570e7 0%,#79f1fc 100%);
box-sizing: border-box;
text-align: center;
line-height: 14px;
font-family: roboto, helvetica;
font-weight: 200;
letter-spacing: 1px;
text-decoration: none;
box-shadow: 0 5px 3px rgba(0, 0, 0, 0.3);
cursor: pointer;
overflow:hidden;
.ripple:hover:before
animation: ripple 1s ease;
.ripple:before
content:"";
position:absolute; top:0; left:0;
width:100%; height:100%;
background-color:rgba(255, 255, 255, 0.7);
border-radius:50%;
transform:scale(0);
@keyframes ripple
fromtransform:scale(0); opacity:1;
totransform:scale(3);opacity:0;
<div class="container">
<a class="ripple">Hover Me</a>
</div>【讨论】：
这可能是最好的事情，但它看起来有点奇怪，与点击时发生的情况完全不同。 @Radical_Activity 你去吧，我刚刚编辑了小提琴以获得更接近原始的东西。Pygame 水波纹效果
...可以很好地模拟平面上的波的末端。我正在寻找基于鼠标悬停/悬停动作的几个Flash效果的相同实现。这是针对交互式地板库的 查看详情
悬停+闪烁时的CSS +不透明度变化
】悬停+闪烁时的CSS+不透明度变化【英文标题】：CSS+OpacitychangeonHover+Flickering【发布时间】：2011-11-2619:25:00【问题描述】：我正在尝试实现一个非常简单的事情：在悬停时更改表格行的不透明度。不幸的是，它的效果不是很好，... 查看详情
有没有办法用（style =“”）改变悬停时的css？ [复制]
】有没有办法用（style=“”）改变悬停时的css？[复制]【英文标题】：Isthereawaytochangecssonhoverwith(style="")?[duplicate]【发布时间】：2013-07-3116:16:12【问题描述】：我知道您可以导入一个css文件，其中包含：divcolor:black;div:hoverco... 查看详情
html悬停时的图像缩放效果(代码片段)
带有CSS的复选框波纹效果
】带有CSS的复选框波纹效果【英文标题】：checkboxrippleeffectswithcss【发布时间】：2020-12-2711:51:17【问题描述】：我正在尝试为复选框实现波纹效果，但它没有准确显示，波纹效果宽度变得太大，下面是我尝试过的代码。我需要一... 查看详情
带有伪元素的 CSS 波纹效果导致回流
】带有伪元素的CSS波纹效果导致回流【英文标题】：CSSRippleeffectwithpseudo-elementcausingreflow【发布时间】：2021-01-0900:05:36【问题描述】：我正在尝试使用styled-components创建材质波纹效果（无法导入材质web-componentsmixins）。我想坚持使... 查看详情
CSS - 另一个悬停时的悬停触发器
】CSS-另一个悬停时的悬停触发器【英文标题】：CSS-Hovertriggeronanotherhover【发布时间】：2020-08-2714:14:39【问题描述】：我想知道是否可以触发这个css中的最后一个悬停以及第二个悬停：.social-menuullia:hovertransform:rotate(0deg)skew(0deg)tran... 查看详情
css实现水波纹效果
1.HTML代码：<divclass="example"><divclass="dot"></div></div>2.CSS样式：设置animation属性.dot:before{content:‘‘;position:absolute;z-index:2;left:0;top:0;width:10px;height:10px;background- 查看详情
悬停效果不适用于 IE8
】悬停效果不适用于IE8【英文标题】：HovereffectsnotworkingwithIE8【发布时间】：2011-09-1007:42:26【问题描述】：我使用CSS来改变表格悬停时的颜色#tabbtbodytr:hovertdcolor:#006;background:#d0e4f2;这在Chrome和Firefox中运行良好，但在InternetExplorer8... 查看详情
鼠标悬停时的 CSS 过渡
】鼠标悬停时的CSS过渡【英文标题】：csstransitiononmouseover【发布时间】：2012-08-3007:13:13【问题描述】：我的横幅中的下拉菜单有以下CSS：#nav-menuliabackground-image:url(\'../images/menu_background.png\');background-repeat:repeat-x;background-position:leftt... 查看详情
css滚动视差之水波纹效果
核心属性：background-attachment这个属性就牛逼了，它可以定义背景图片是相对视口固定，还是随着视口滚动，加上这个属性网页瞬间就从屌丝变成高大上。我们来看个例子：html:<divclass="attachview"></div><divclass="textview">IW... 查看详情
取消悬停时的 CSS3 动画
】取消悬停时的CSS3动画【英文标题】：CancelCSS3animationonhover【发布时间】：2013-11-2908:03:35【问题描述】：我正在寻找一种在div悬停时完全取消CSS3动画的方法。目前，div有一个动画，在页面加载时播放，显示页面菜单3秒然后淡出... 查看详情
使用 css 动画更改悬停时的圆形背景
】使用css动画更改悬停时的圆形背景【英文标题】：Changecirclebackgroundonhoverusingcssanimation【发布时间】：2017-09-0110:00:53【问题描述】：我有一个圆圈，它的背景颜色设置为红色，我想使用css动画更改悬停时的背景，我该怎么做？... 查看详情
css3动画图片波纹效果
这里的图片很有特点，下面有演示图片样式<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head>& 查看详情
悬停时的CSS 3旋转动画[重复]
】悬停时的CSS3旋转动画[重复]【英文标题】：CSS3RotateAnimationonhover[duplicate]【发布时间】：2015-12-1513:31:02【问题描述】：我有这段代码可以在悬停时进行旋转。它根本不起作用。它有什么问题？我需要完整的360º旋转动画.icon-style-... 查看详情
快速移动光标时的Jquery悬停问题
】快速移动光标时的Jquery悬停问题【英文标题】：Jqueryhoverproblemswhenmovingcursorfast【发布时间】：2012-09-1901:51:17【问题描述】：我的Jquery悬停效果有两个问题。如果您将鼠标移入和移出非常快（几次），即使鼠标不再位于包含的DIV... 查看详情
悬停时的 CSS 菜单问题
】悬停时的CSS菜单问题【英文标题】：CSSMenuissueonhover【发布时间】：2014-06-1003:16:27【问题描述】：我有一个包含四个项目的菜单，每个项目都有不同的颜色。我的挑战是在悬停时使每个项目变暗，我知道我可以使用不透明度来... 查看详情
使用 CSS 突出显示悬停时的两个表格行
】使用CSS突出显示悬停时的两个表格行【英文标题】：HighlighttwotablerowsonhoverwithCSS【发布时间】：2012-02-0411:50:08【问题描述】：在鼠标悬停时更改表格中一行的背景颜色非常简单，使用CSS：.HighlightableRow:hoverbackground-color:lightgray;... 查看详情