Ripplet.js点击波插件特效

ziblog

已于 2025-06-27 11:05:30 修改

阅读量296

点赞数 5

CC 4.0 BY-SA版权

文章标签： css css3 html

于 2025-06-20 15:36:38 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148793730

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ripplet.js点击波插件特效</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e, #16213e);
font-family: 'Arial', sans-serif;
}

.container {
width: 100%;
max-width: 800px;
padding: 20px;
text-align: center;
}

h1 {
color: white;
margin-bottom: 30px;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.btn {
display: inline-block;
padding: 12px 24px;
margin: 10px;
background: linear-gradient(45deg, #4CAF50, #8BC34A);
color: white;
border: none;
border-radius: 50px;
font-size: 16px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.btn:active {
transform: translateY(1px);
}

.card {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 30px;
margin: 20px 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);
cursor: pointer;
transition: all 0.3s ease;
}

.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.card h2 {
color: white;
margin-bottom: 15px;
}

.card p {
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
}

.credit {
margin-top: 40px;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}

.credit a {
color: #4CAF50;
text-decoration: none;
transition: color 0.3s;
}

.credit a:hover {
color: #FFD700;
}

/* 自定义波纹效果 */
.ripplet {
position: absolute;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.4);
transform: scale(0);
animation: ripplet 0.6s linear;
pointer-events: none;
}

@keyframes ripplet {
100% {
transform: scale(2);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Ripplet.js点击波特效演示</h1>

<button class="btn" id="btn1">点击我</button>
<button class="btn" id="btn2">另一个按钮</button>
<button class="btn" id="btn3">更多波纹</button>

<div class="card" id="card1">
<h2>卡片标题</h2>
<p>点击卡片任意位置查看波纹效果。这是一个使用纯JavaScript实现的轻量级波纹效果插件。</p>
</div>

<div class="card" id="card2">
<h2>另一个卡片</h2>
<p>尝试点击这个卡片的不同位置，看看波纹效果如何从点击位置扩散开来。</p>
</div>

<div class="credit">
</div>
</div>