【UI】前端常用特效

文章目录

一、文字水波纹特效
二、按钮按动特效
三、网页特效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>

以该网站为例实现的效果

四、粒子特效

非常炫酷的粒子特效

因为之前已经发布过一篇文章专门介绍粒子特效的，在这里就不详细介绍了
传送门：vue2 粒子特效

未完待续…

下班~

【UI】前端常用特效相关推荐

2022 前端常用的开发工具、组件库等等~持续整理，待你分享~
2022 前端常用的开发工具.组件库等等持续整理,待你分享小伙伴们!我这里整理了一些对前端开发有帮助的工具.库.网站等.对于这些东西有些是我自己用过的,有些是听过的,但是也有些是没听过也没用过的.只 ...
ui设计师常用的设计工具_2020年应该使用哪个UI设计工具？
ui设计师常用的设计工具重点 (Top highlight) It's 2020, the market today is saturated with UI design tools. Ever ...
html css 圆形按钮仿uc,10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
web前端常用网址大全
免费接口API http://zhouxunwang.cn/ es6书籍 https://es6.ruanyifeng.com/ js菜鸟教程 https://www.runoob.com/js/js ...
这里主要推荐一下前端常用，提高效率的一些库和软件
## 这里主要推荐一下自己平时常用,提高效率的一些库和软件前端常用* sweetalert2 一个自适应,且自定义性强的弹出框(零依赖) tippy.js 最著名的 tooltip/popover ...
60+ 个前端常用插件库合集
60+ 个前端常用插件库合集目录 60+ 个前端常用插件库合集 DataTables LazyLoad lightSlider alertify.js pickadate.js-日期/时间选择器 c ...
ui与html界面区别,ui前端和web前端的区别是什么？
ui前端和web前端都是都是用于前端的,那么它们之间有什么区别呢?本篇文章就来给大家介绍一下ui前端和web前端之间的区别,下面我们来看具体的内容. 什么是ui前端? UI设计是指对软件的人机交互.操 ...
chrome vue插件_VS Code 前端常用插件推荐
⊕.vscode安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启vscode使得插件生效. Ξ.当你不需要某个插件时只需要进入扩展,点击对应 ...
前端常用60余种工具方法（下）
前端常用60余种工具方法(上) 41.将数字转换为大写金额 export const changeToChinese = (Num) => {//判断如果传递进来的不是字符的话转换为字符if ( ...