阿超 > 悬停卡片效果 悬停卡片效果 前端 2023-07-30 悬停卡片效果 2023-07-30 前端 人在无端微笑时，不是百无聊赖，就是痛苦难当。——王小波 分享一个通过css实现的卡片悬停效果 代码地址：cards: 悬浮卡片 在线演示：Document <p><img src="/imgs/oss/picGo/20230730191957.png" alt="" /></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> 我的名字叫阿超 年龄22岁 家在四川省成都市 未婚 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度</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="/2024/04/25/%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%88%E6%8E%92%E7%89%88%E6%8C%87%E5%8C%97/">中文文案排版指北</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/04/25/apache-streampark%E5%8F%91%E7%89%88%E9%AA%8C%E8%AF%81/">apache-streampark发版验证</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/04/24/docker%E5%BF%AB%E9%80%9F%E4%BD%BF%E7%94%A8nginx%E5%AE%9E%E7%8E%B0%E9%83%A8%E7%BD%B2%E5%89%8D%E7%AB%AFdist/">docker快速使用nginx实现部署前端dist</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/04/23/satoken-webflux%E8%8E%B7%E5%8F%96header%E4%BB%A5%E5%8F%8Abody%E9%97%AE%E9%A2%98/">satoken+webflux获取header以及body问题</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/04/22/Mysql%E7%9A%84NULLIF/">Mysql的NULLIF</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/04/21/OceanBase%E5%BC%80%E5%8F%91%E8%80%85%E5%A4%A7%E4%BC%9A/">OceanBase开发者大会</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/04/20/java%E4%BD%BF%E7%94%A8jodd%E6%93%8D%E4%BD%9Chtml/">java使用jodd操作html</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/04/19/suno-api/">suno-api</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/04/18/dromara-newcar/">dromara-newcar</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/04/17/octokit-js/">octokit.js</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="/2023/03/14/BibiGPT/">BibiGPT</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2022/12/03/Jpom%E6%8F%92%E4%BB%B6%E7%AB%AF%E7%AE%A1%E7%90%86%E9%A1%B9%E7%9B%AE%E9%83%A8%E7%BD%B2/">Jpom插件端管理项目部署</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2023/09/02/TreeMap%E8%B8%A9%E5%9D%91/">TreeMap踩坑</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/01/14/chakra-ui/">chakra-ui</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2023/07/20/idea%E5%8D%A1%E9%A1%BF%E5%B4%A9%E6%BA%83%E5%9D%91/">idea卡顿崩溃坑</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/02/07/windows%E7%AA%97%E5%8F%A3%E5%BD%92%E4%BD%8D/">windows窗口归位</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2023/07/27/wiztree/">wiztree</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2021/04/29/%E4%B8%8D%E8%A6%81%E5%86%8D%E9%97%AE%E6%88%91%E5%89%8D%E7%AB%AF%E5%A6%82%E4%BD%95%E8%AE%A9%E5%AD%97%E7%AC%A6%E4%B8%B2%E8%BD%AC%E6%88%90Date%E4%BA%86/">不要再问我前端如何让字符串转成Date了</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2022/10/15/%E8%8A%82%E5%81%87%E6%97%A5%E8%A1%A5%E7%8F%AD%E6%97%A5%E5%8E%86/">节假日补班日历</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="/2023/07/30/%E6%82%AC%E5%81%9C%E5%8D%A1%E7%89%87%E6%95%88%E6%9E%9C/index.html#sidebar-tags" data-toggle="tab" id="tags-tab">热门标签</a> </li> <li> <a href="/2023/07/30/%E6%82%AC%E5%81%9C%E5%8D%A1%E7%89%87%E6%95%88%E6%9E%9C/index.html#sidebar-friend-links" data-toggle="tab" id="friend-links-tab">友情链接</a> </li> <li> <a href="/2023/07/30/%E6%82%AC%E5%81%9C%E5%8D%A1%E7%89%87%E6%95%88%E6%9E%9C/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/java/" style="font-size: 18.58105537512072px;" class="tag-cloud-link">java</a> <a href="/tags/%E8%BD%AF%E4%BB%B6%E5%8F%8A%E6%8F%92%E4%BB%B6/" style="font-size: 19.77803209631009px;" class="tag-cloud-link">软件及插件</a> <a href="/tags/ai/" style="font-size: 8.700814835946062px;" class="tag-cloud-link">ai</a> <a href="/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 15.656143674018px;" class="tag-cloud-link">前端</a> <a href="/tags/%E6%95%B0%E6%8D%AE%E5%BA%93/" style="font-size: 8.573291251139882px;" class="tag-cloud-link">数据库</a> <a href="/tags/%E8%BF%90%E7%BB%B4/" style="font-size: 16.230168824967194px;" class="tag-cloud-link">运维</a> <a href="/tags/ios/" style="font-size: 18.241458619938182px;" class="tag-cloud-link">ios</a> <a href="/tags/android/" style="font-size: 11.415239199275074px;" class="tag-cloud-link">android</a> <a href="/tags/Java/" style="font-size: 11.978380835457891px;" class="tag-cloud-link">Java</a> <a href="/tags/%E5%B0%8F%E6%8A%80%E5%B7%A7/" style="font-size: 19.24022524694891px;" class="tag-cloud-link">小技巧</a> <a href="/tags/bug/" style="font-size: 18.63009121545435px;" class="tag-cloud-link">bug</a> <a href="/tags/kotlin/" style="font-size: 15.31149233298374px;" class="tag-cloud-link">kotlin</a> <a href="/tags/minecraft/" style="font-size: 9.264453968621797px;" class="tag-cloud-link">minecraft</a> <a href="/tags/rust/" style="font-size: 15.954319227659642px;" class="tag-cloud-link">rust</a> <a href="/tags/flink/" style="font-size: 11.559736211145683px;" class="tag-cloud-link">flink</a> <a href="/tags/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/" style="font-size: 13.71726170766797px;" class="tag-cloud-link">机器学习</a> <a href="/tags/python/" style="font-size: 19.478425183405335px;" class="tag-cloud-link">python</a> <a href="/tags/redis/" style="font-size: 9.183677548959384px;" class="tag-cloud-link">redis</a> <a href="/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" style="font-size: 15.583469340643513px;" class="tag-cloud-link">设计模式</a> <a href="/tags/%E7%AE%97%E6%B3%95/" style="font-size: 12.795449071326662px;" 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>