阿超 > RainEffect RainEffect 前端 2022-10-05 RainEffect 2022-10-05 前端 不要从你自己的口袋里掏出勋章借给你的朋友，这是侮辱他的——泰戈尔 分享一个真实的雨滴效果： https://tympanus.net/Development/RainEffect/#slide-1 <p><code>github</code>地址：<a target="_blank" rel="noopener" href="https://github.com/codrops/RainEffect">https://github.com/codrops/RainEffect</a></p> <p>还是非常炫酷的</p> <p><img src="/imgs/oss/picGo/image-20221005191548445.png" alt="image-20221005191548445" /></p> </div> </article> </div> <aside class="col-md-4 gal-left" id="sidebar"> <!-- 此为sidebar的搜索框, 非搜索结果页面 --> <aside id="sidebar-search"> <div class="search" data-aos="fade-up" data-aos-duration="2000"> <form class="form-inline clearfix" id="search-form" method="get" action="/search/index.html"> <input type="text" name="s" class="form-control" id="searchInput" placeholder="搜索文章~" autocomplete="off"> <button class="btn btn-danger btn-gal" type="submit"> <i class="fa fa-search"></i> </button> </form> </div> </aside> <aside id="sidebar-author"> <div class="panel panel-gal" data-aos="flip-right" data-aos-duration="3000"> <div class="panel-heading" style="text-align: center"> <i class="fa fa-quote-left"></i> 阿超 <i class="fa fa-quote-right"></i> </div> <div class="author-panel text-center"> <div class="author-avatar"> <img src="/imgs/head.png" alt="个人头像" class="author-image"> </div> <p class="author-description"><p> 我的名字叫阿超 年龄23岁 家在四川省成都市 未婚 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度</p> </p> </div> </div> </aside> <aside id="sidebar-recent_comments"> <div class="panel panel-gal recent hidden-xs" data-aos="fade-up" data-aos-duration="2000"> <div class="panel-heading"> <i class="fa fa-comments"></i> 最新评论 <i class="fa fa-times-circle panel-remove"></i> <i class="fa fa-chevron-circle-up panel-toggle"></i> </div> <ul class="list-group list-group-flush"></ul> </div> </aside> <!-- 要配置好leancloud才能开启此小工具 --> <aside id="sidebar-recent_posts"> <div class="panel panel-gal recent hidden-xs" data-aos="fade-up" data-aos-duration="2000"> <div class="panel-heading"> <i class="fa fa-refresh"></i> 近期文章 <i class="fa fa-times-circle panel-remove"></i> <i class="fa fa-chevron-circle-up panel-toggle"></i> </div> <ul class="list-group list-group-flush"> <li class="list-group-item"> <span class="post-title"> <a href="/2025/05/31/remix/">remix</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2025/05/30/containered/">containered</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2025/05/29/BubbleSeekBar/">BubbleSeekBar</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2025/05/28/react-router-ant-design%E8%8F%9C%E5%8D%95%E9%A1%B5%E9%9D%A2%E5%88%B0%E5%BF%AB%E9%80%9F%E9%83%A8%E7%BD%B2/">react-router+ant-design菜单页面到快速部署</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2025/05/27/theia/">theia</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2025/05/26/vue-ueditor-wrap/">vue-ueditor-wrap</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2025/05/25/volcano/">volcano</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2025/05/24/CircularProgressBar/">CircularProgressBar</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2025/05/23/titlebar/">titlebar</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2025/05/22/wangeditor%E6%B8%B2%E6%9F%93node%E6%96%B9%E5%BC%8F/">wangeditor渲染node方式</a> </span> </li> </ul> </div> </aside> <aside id="sidebar-rand_posts"> <div class="panel panel-gal recent" data-aos="fade-up" data-aos-duration="2000"> <div class="panel-heading"> <i class="fa fa-refresh"></i> 随机文章 <i class="fa fa-times-circle panel-remove"></i> <i class="fa fa-chevron-circle-up panel-toggle"></i> </div> <ul class="list-group list-group-flush"> <li class="list-group-item"> <span class="post-title"> <a href="/2020/10/02/cookie%E7%9B%B8%E5%85%B3%E6%93%8D%E4%BD%9C/">cookie相关操作</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2023/02/24/css%E7%BB%98%E5%88%B6%E4%B8%89%E8%A7%92%E5%BD%A2/">css绘制三角形</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2022/02/14/hutool%E4%B8%AD-Alias/">hutool中@Alias</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2021/04/21/idea%E5%90%AF%E5%8A%A8springboot%E6%97%B6%E6%8C%87%E5%AE%9A%E7%AB%AF%E5%8F%A3%E5%8F%B7/">idea启动springboot时指定端口号</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/01/17/js%E4%BA%BA%E8%84%B8%E6%A3%80%E6%B5%8B/">js人脸检测</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2022/12/06/js%E5%B0%8F%E7%9F%A5%E8%AF%86/">js小知识</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2021/09/23/sessionStorage/">sessionStorage</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2022/04/14/ts%E7%BB%93%E6%9E%84%E8%B5%8B%E5%80%BC%E6%97%B6%E6%8C%87%E5%AE%9A%E7%B1%BB%E5%9E%8B/">ts结构赋值时指定类型</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2021/03/20/zipkin/">zipkin</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2022/06/11/%E9%83%A8%E7%BD%B2boot%E9%A1%B9%E7%9B%AEsh%E8%84%9A%E6%9C%AC/">部署boot项目sh脚本</a> </span> </li> </ul> </div> </aside> <aside id="gal-sets"> <div class="panel panel-gal" data-aos="fade-up" data-aos-duration="2000"> <ul class="nav nav-pills pills-gal"> <li> <a href="/2022/10/05/RainEffect/index.html#sidebar-tags" data-toggle="tab" id="tags-tab">热门标签</a> </li> <li> <a href="/2022/10/05/RainEffect/index.html#sidebar-friend-links" data-toggle="tab" id="friend-links-tab">友情链接</a> </li> <li> <a href="/2022/10/05/RainEffect/index.html#sidebar-links" data-toggle="tab" id="links-tab">个人链接</a> </li> </ul> <div class="tab-content"> <div class="cloud-tags tab-pane nav bs-sidenav fade" id="sidebar-tags"> <a href="/tags/%E8%BD%AF%E4%BB%B6%E5%8F%8A%E6%8F%92%E4%BB%B6/" style="font-size: 18.641975570499202px;" class="tag-cloud-link">软件及插件</a> <a href="/tags/java/" style="font-size: 17.87883854348062px;" class="tag-cloud-link">java</a> <a href="/tags/%E5%B0%8F%E6%8A%80%E5%B7%A7/" style="font-size: 15.245780470794342px;" class="tag-cloud-link">小技巧</a> <a href="/tags/ai/" style="font-size: 11.371775715200627px;" class="tag-cloud-link">ai</a> <a href="/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 17.67407427977313px;" class="tag-cloud-link">前端</a> <a href="/tags/android/" style="font-size: 9.95269626464513px;" class="tag-cloud-link">android</a> <a href="/tags/python/" style="font-size: 15.74173821628148px;" class="tag-cloud-link">python</a> <a href="/tags/%E6%95%B0%E6%8D%AE%E5%BA%93/" style="font-size: 12.877869452688888px;" class="tag-cloud-link">数据库</a> <a href="/tags/%E8%BF%90%E7%BB%B4/" style="font-size: 8.141169746282884px;" class="tag-cloud-link">运维</a> <a href="/tags/go/" style="font-size: 12.582447589239713px;" class="tag-cloud-link">go</a> <a href="/tags/ios/" style="font-size: 14.419970867451564px;" class="tag-cloud-link">ios</a> <a href="/tags/flutter/" style="font-size: 16.739521491956665px;" class="tag-cloud-link">flutter</a> <a href="/tags/Java/" style="font-size: 14.47329719705477px;" class="tag-cloud-link">Java</a> <a href="/tags/c/" style="font-size: 18.640059694182046px;" class="tag-cloud-link">c</a> <a href="/tags/bug/" style="font-size: 19.117891582424896px;" class="tag-cloud-link">bug</a> <a href="/tags/kotlin/" style="font-size: 18.57690276825957px;" class="tag-cloud-link">kotlin</a> <a href="/tags/swift/" style="font-size: 10.03012917801188px;" class="tag-cloud-link">swift</a> <a href="/tags/minecraft/" style="font-size: 8.305864522701379px;" class="tag-cloud-link">minecraft</a> <a href="/tags/rust/" style="font-size: 19.20976366247595px;" class="tag-cloud-link">rust</a> <a href="/tags/%E9%83%A8%E7%BD%B2/" style="font-size: 15.079843752098387px;" class="tag-cloud-link">部署</a> <a href="/tags/c/" style="font-size: 17.970246802777872px;" class="tag-cloud-link">c++</a> <a href="/tags/flink/" style="font-size: 14.63875170485663px;" class="tag-cloud-link">flink</a> <a href="/tags/lua/" style="font-size: 14.89922064302078px;" class="tag-cloud-link">lua</a> <a href="/tags/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/" style="font-size: 18.423195485886502px;" class="tag-cloud-link">机器学习</a> <a href="/tags/php/" style="font-size: 12.35746679565165px;" class="tag-cloud-link">php</a> <a href="/tags/typescript/" style="font-size: 16.915455680000655px;" class="tag-cloud-link">typescript</a> <a href="/tags/redis/" style="font-size: 17.879500180583598px;" class="tag-cloud-link">redis</a> <a href="/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" style="font-size: 19.35720341682208px;" class="tag-cloud-link">设计模式</a> <a href="/tags/objective-c/" style="font-size: 16.540882476113556px;" class="tag-cloud-link">objective-c</a> <a href="/tags/%E7%AE%97%E6%B3%95/" style="font-size: 10.060057309792526px;" class="tag-cloud-link">算法</a> </div> <div class="friend-links tab-pane nav bs-sidenav fade" id="sidebar-friend-links"> <li> <a href="https://mofan212.gitee.io/" target="_blank">Mofan</a> </li> <li> <a href="http://www.wwang.net" target="_blank">派派河鉴黄师</a> </li> <li> <a href="https://shrimp_study.gitee.io/" target="_blank">加油</a> </li> <li> <a href="https://howling.gitee.io/" target="_blank">嚎羸</a> </li> <li> <a href="https://techyang99.gitee.io/" target="_blank">Techyang</a> </li> <li> <a href="https://mujeyf.cn" target="_blank">GeekDream</a> </li> <li> <a href="https://amadasy.gitee.io/" target="_blank">Amadasy</a> </li> <li> <a href="http://47.95.208.251:8081/niubi/dist/index.html#/blog" target="_blank">NIUBI</a> </li> <li> <a href="http://www.znbiscool.icu" target="_blank">宇智波问天</a> </li> <li> <a href="https://www.xsyyds.top" target="_blank">醉相生</a> </li> <li> <a href="http://60.205.188.140:8888/" target="_blank">那就孤雏</a> </li> <li> <a href="https://www.jauxgit.top" target="_blank">jaux署记</a> </li> <li> <a href="http://septzhang.link/" target="_blank">SeptZhangの小站</a> </li> <li> <a href="http://myblog.zhaixing.work/" target="_blank">星辰驿站</a> </li> <li> <a href="https://47.93.242.4:88" target="_blank">宇泽希</a> </li> <li> <a href="https://kwydy.gitee.io/" target="_blank">这个爱酱不太聪明</a> </li> <li> <a href="https://rivencabin.gitee.io/" target="_blank">Riven的小屋</a> </li> <li> <a href="https://rocpenghua.gitee.io/" target="_blank">小鹏驿站</a> </li> <li> <a href="https://budongfeng.gitee.io/weekly/" target="_blank">生活富能量</a> </li> <li> <a href="https://zygzyg.cloud/" target="_blank">Error's Blog</a> </li> </div> <div class="links tab-pane nav bs-sidenav fade" id="sidebar-links"> <li> <a href="https://gitee.com/vampireachao/" target="_blank">Gitee</a> </li> </div> </div> </div> </aside> </aside> </div> </div> </div> <footer id="gal-footer"> <div class="container"> Copyright © 2018 阿超 Powered by <a href="https://hexo.io/" target="_blank">Hexo</a>. Theme by <a href="https://github.com/ZEROKISEKI" target="_blank">AONOSORA</a> </div> </footer> <!-- 回到顶端 --> <div id="gal-gotop"> <i class="fa fa-angle-up"></i> </div> <style> #cursor-circle { pointer-events: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid black; background: white; mix-blend-mode: exclusion; position: absolute; z-index: 99999 } </style> <div id="cursor-circle"></div> <div id="cursor-pointer"></div> <script type="application/javascript"> const cursorCircle = document.querySelector("#cursor-circle") window.addEventListener('mousemove', e => { cursorCircle.style.top = document.documentElement.scrollTop + e.clientY - 11 + 'px' cursorCircle.style.left = document.documentElement.scrollLeft + e.clientX - 11 + 'px' }) </script> </body> <script src="/js/activate-power-mode.js"></script> <script> // 配置highslide hs.graphicsDir = '/js/highslide/graphics/' hs.outlineType = "rounded-white"; hs.dimmingOpacity = 0.8; hs.outlineWhileAnimating = true; hs.showCredits = false; hs.captionEval = "this.thumb.alt"; hs.numberPosition = "caption"; hs.align = "center"; hs.transitions = ["expand", "crossfade"]; hs.lang.number = '共%2张图, 当前是第%1张'; hs.addSlideshow({ interval: 5000, repeat: true, useControls: true, fixedControls: "fit", overlayOptions: { opacity: 0.75, position: "bottom center", hideOnMouseOut: true } }) // 初始化aos AOS.init({ duration: 1000, delay: 0, easing: 'ease-out-back' }); </script> <script> POWERMODE.colorful = 'true'; // make power mode colorful POWERMODE.shake = 'true'; // turn off shake // TODO 这里根据具体情况修改 document.body.addEventListener('input', POWERMODE); </script> <script> window.slideConfig = { prefix: '/imgs/slide/background', ext: 'jpg', maxCount: '6' } </script> <script src="/js/hs.js"></script> <script src="/js/blog.js"></script> </html>