📌  相关文章
📜  如何使用 HTML 和 CSS 创建冲击波或爆炸效果？(1)

📅  最后修改于: 2023-12-03 15:08:19.101000             🧑  作者: Mango

如何使用 HTML 和 CSS 创建冲击波或爆炸效果？

在 HTML 和 CSS 中，我们可以使用动画和过渡来创建冲击波或爆炸效果。下面我们将介绍三种常用的方法。

1. 使用 CSS 动画
<!DOCTYPE html>
<html>
<head>
	<title>CSS Animation</title>
	<style type="text/css">
		@keyframes ripple {
			from {
				transform: scale(1);
				opacity: 1;
			}
			to {
				transform: scale(3);
				opacity: 0;
			}
		}
		.ripple-effect {
			position: relative;
			display: inline-block;
			padding: 24px;
			background-color: #4CAF50;
			color: white;
			animation: ripple 1s ease-in-out;
		}
	</style>
</head>
<body>
	<div class="ripple-effect">Click Me</div>
</body>
</html>
代码说明
  • @keyframes 定义动画的关键帧，from 代表动画开始的状态，to 代表动画结束后的状态；
  • transform: scale(x) 缩放元素的大小，opacity 控制元素的透明度；
  • animation 用于定义动画，ripple 表示动画名称，1s 表示动画持续时间为 1 秒，ease-in-out 表示动画速度为先慢后快再慢；
  • .ripple-effect 用于定义元素样式，position: relative 表示相对定位，display: inline-block 表示元素行内块级元素，background-color 为背景颜色，color 为字体颜色。
2. 使用 CSS 过渡
<!DOCTYPE html>
<html>
<head>
	<title>CSS Transition</title>
	<style type="text/css">
		.ripple-effect {
			position: relative;
			display: inline-block;
			padding: 24px;
			background-color: #4CAF50;
			color: white;
			overflow: hidden;
		}
		.ripple-effect::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			background: radial-gradient(circle, #ffffff 10%, transparent 10.01%);
			background-size: 1500px 1500px;
			background-position: 100% 100%;
			transform: translate(-50%, -50%);
			opacity: 0;
			transition: transform 0.3s, opacity 1s;
		}
		.ripple-effect:hover::before {
			transform: translate(-50%, -50%) scale(15);
			opacity: 0.15;
		}
	</style>
</head>
<body>
	<div class="ripple-effect">Hover Me</div>
</body>
</html>
代码说明
  • radial-gradient 是 CSS3 渐变的一种，圆形渐变的半径以背景层的大小为准；
  • background-size: 1500px 1500px 背景层的大小要足够大，因为我们会把它拉成大的圆形；
  • transition 定义动画过渡效果，transform 和 opacity 分别表示位移和透明度的过渡效果；
  • :hover 伪类用于指定当鼠标悬停在元素上方时应该发生的行为。
3. 使用 JavaScript
<!DOCTYPE html>
<html>
<head>
	<title>JavaScript Effect</title>
	<style type="text/css">
		.ripple-effect {
			position: relative;
			display: inline-block;
			padding: 24px;
			background-color: #4CAF50;
			color: white;
			overflow: hidden;
		}
	</style>
	<script type="text/javascript">
		function createRipple(event) {
			const button = event.currentTarget;
			const circle = document.createElement("span");
			const diameter = Math.max(button.clientWidth, button.clientHeight);
			const radius = diameter / 2;
			const x = event.clientX - button.offsetLeft - radius;
			const y = event.clientY - button.offsetTop - radius;

			circle.style.width = circle.style.height = `${diameter}px`;
			circle.style.left = `${x}px`;
			circle.style.top = `${y}px`;
			circle.classList.add("ripple");

			const ripple = button.getElementsByClassName("ripple")[0];

			if (ripple) {
				ripple.remove();
			}

			button.appendChild(circle);
		}

		const buttons = document.getElementsByTagName("button");
		for (const button of buttons) {
			button.addEventListener("click", createRipple);
		}
	</script>
</head>
<body>
	<button class="ripple-effect">Click Me</button>
</body>
</html>
代码说明
  • createRipple 函数用于创建水波纹效果；
  • Math.max() 方法返回其所有参数中的最大值；
  • classList 属性包含元素的类名列表，添加和删除类名可以通过 add() 和 remove() 方法完成；
  • getElementsByTagName() 方法返回指定标签名的所有元素；
  • for...of 语句用于遍历一个可迭代对象，addEventListener() 方法用于为元素添加事件监听器。

以上三种方法都可以实现冲击波或爆炸效果，具体使用哪一种方法取决于实际需求。