【UI】前端常用特效

article/2025/11/9 14:47:51

文章目录

- 一、文字水波纹特效
- 二、按钮按动特效
- 三、网页特效live2d看板娘
- 四、粒子特效

一、文字水波纹特效

请添加图片描述
完整html代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>海拥 | 水波文本动画</title><style>@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");* {margin: 0;padding: 0;box-sizing: border-box;font-family: "Poppins", sans-serif;}body {display: flex;background: #000;min-height: 100vh;align-items: center;justify-content: center;}.content {position: relative;}.content h2 {color: #fff;font-size: 8em;position: absolute;transform: translate(-50%, -50%);}.content h2:nth-child(1) {color: transparent;-webkit-text-stroke: 2px #03a9f4;}.content h2:nth-child(2) {color: #03a9f4;animation: animate 4s ease-in-out infinite;}@keyframes animate {0%,100% {clip-path: polygon(0% 45%,16% 44%,33% 50%,54% 60%,70% 61%,84% 59%,100% 52%,100% 100%,0% 100%);}50% {clip-path: polygon(0% 60%,15% 65%,34% 66%,51% 62%,67% 50%,84% 45%,100% 46%,100% 100%,0% 100%);}}.page-footer {position: fixed;right: 35px;bottom: 20px;display: flex;align-items: center;padding: 5px;color: black;background: rgba(255, 255, 255, 0.65);}.page-footer a {display: flex;margin-left: 4px;}.touxiang {bottom: 0px;width: 30px;height: 30px;}</style><script>var _hmt = _hmt || [];(function () {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?a9430a37066911650e26adadcc42798a";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script>
</head><body><section><div class="content"><h2>Amoureux555</h2><h2>Amoureux555</h2></div></section></body></html>

二、按钮按动特效

请添加图片描述
简单的几行css就能实现的按钮按动特效

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box19 {width: 100px;height: 30px;background: #89d444;line-height: 30px;color: #fff;user-select: none;box-shadow: 0px 8px 0 0 #479a48,0 10px 5px 0 rgba(0, 0, 0, .5);border-radius: 5px;transform: translateY(-8px);text-align: center;}.box19:active {transform: translateY(0);box-shadow: 0 0}</style>
</head><body><div class="box19">点击</div>
</body></html>

三、网页特效live2d看板娘

今天无意中看到一个特效，网页特效live2d看板娘，感觉效果还挺不错的。不过，这个特效适合那些总喜欢花里胡哨的朋友们，至于喜欢简洁且不想该站点那么卡顿的朋友们可以放弃了。
在这里插入图片描述
其实网站实现网页特效live2d看板娘的操作方法也很简单，只需简单的几行代码便可轻松搞定。该人物会跟随你的鼠标动，给网站添加了不少特色，超级可爱！

直接在项目中引入文件即可，例如vue2项目在index.html中粘贴代码即可

1、默认无参数显示在右下角

<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
<script type="text/javascript">L2Dwidget.on('*', (name) => {console.log('%c EVENT ' + '%c -> ' + name, 'background: #222; color: yellow', 'background: #fff; color: #000')}).init({dialog: {// 开启对话框enable: true,script: {// 每空闲 10 秒钟，显示一条一言'every idle 10s': '$hitokoto$',// 当触摸到角色身体'tap body': '哎呀！别碰我！',// 当触摸到角色头部'tap face': '人家已经不是小孩子了！'}}});
</script>

2、带参数显示在左下角（需求不同可以修改）

<script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
<script type="text/javascript">L2Dwidget.on('*', (name) => {console.log('%c EVENT ' + '%c -> ' + name, 'background: #222; color: yellow', 'background: #fff; color: #000')}).init({display: {// 居左"position": "left",// 宽度"width": 200,// 高度"height": 400,// 距左右"hOffset": 35,// 距下"vOffset": -20},mobile: {// 移动端，false为关闭"show": true,"scale": 0.5},dialog: {// 开启对话框，false为关闭enable: true,script: {// 每空闲 10 秒钟，显示一条一言'every idle 10s': '$hitokoto$',// 当触摸到角色身体'tap body': '哎呀！别碰我！',// 当触摸到角色头部'tap face': '人家已经不是小孩子了！'}}});
</script>