阿超 > 悬停卡片效果 悬停卡片效果 前端 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/11/20/hashcat/">hashcat</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/11/19/BunnyVisionPro/">BunnyVisionPro</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/11/18/Alamofire/">Alamofire</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/11/17/SwiftLint/">SwiftLint</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/11/16/SwifterSwift/">SwifterSwift</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/11/15/uniapp-x%E4%B9%8Buts%E6%8F%92%E4%BB%B6%E8%BF%90%E8%A1%8Chutool/">uniapp-x之uts插件运行hutool</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/11/14/uniapp%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/">uniapp自动化测试</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/11/13/uniapp-cli%E5%B7%A5%E7%A8%8B/">uniapp-cli工程</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/11/12/uView%E5%8D%87%E7%BA%A7http%E9%85%8D%E7%BD%AE%E5%85%BC%E5%AE%B9%E5%8F%98%E6%9B%B4/">uView升级http配置兼容变更</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2024/11/11/HBuilderX%E8%BF%90%E8%A1%8C%E5%88%B0iOS%E7%9C%9F%E6%9C%BA/">HBuilderX运行到iOS真机</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="/2022/01/04/gradle%E8%BF%90%E8%A1%8C%E9%A1%B9%E7%9B%AE%E4%B8%8D%E6%98%BE%E7%A4%BA%E5%BC%82%E5%B8%B8/">gradle运行项目不显示异常</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2022/09/08/hutool%E8%8E%B7%E5%8F%96excel%E4%B8%AD%E7%9A%84%E5%9B%BE%E7%89%87/">hutool获取excel中的图片</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2022/11/04/jenkins%E5%8D%87%E7%BA%A7%E5%9D%91/">jenkins升级坑</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2023/12/20/mediapipe/">mediapipe</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2020/12/27/mysql%E6%97%A5%E6%9C%9F%E5%87%BD%E6%95%B0/">mysql日期函数</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2021/10/11/springboot%E9%A1%B9%E7%9B%AE%E6%89%93%E5%8C%85%E5%90%8E%E9%A1%B5%E9%9D%A2%E8%AE%BF%E9%97%AE%E4%B8%8D%E5%88%B0/">springboot项目打包后页面访问不到</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2023/10/17/srs%E5%AE%9E%E7%8E%B0%E5%90%88%E6%B5%81/">srs实现合流</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2021/06/30/wow-js/">wow.js</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2020/06/10/%E4%B8%80%E8%A1%8C%E4%BB%A3%E7%A0%81%E6%90%9E%E5%AE%9A%E4%B8%AD%E6%96%87%E5%A7%93%E5%90%8D%E6%8E%92%E5%BA%8F/">一行代码搞定中文姓名排序</a> </span> </li> <li class="list-group-item"> <span class="post-title"> <a href="/2021/05/03/%E5%8F%98%E9%87%8F%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC/">变量解构赋值</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: 16.28509506812134px;" class="tag-cloud-link">java</a> <a href="/tags/ai/" style="font-size: 9.79770213173355px;" class="tag-cloud-link">ai</a> <a href="/tags/%E8%BD%AF%E4%BB%B6%E5%8F%8A%E6%8F%92%E4%BB%B6/" style="font-size: 10.821946621880205px;" class="tag-cloud-link">软件及插件</a> <a href="/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 9.732103697588713px;" class="tag-cloud-link">前端</a> <a href="/tags/android/" style="font-size: 10.188079184456157px;" class="tag-cloud-link">android</a> <a href="/tags/python/" style="font-size: 10.747487817484908px;" class="tag-cloud-link">python</a> <a href="/tags/%E6%95%B0%E6%8D%AE%E5%BA%93/" style="font-size: 13.188082426487163px;" class="tag-cloud-link">数据库</a> <a href="/tags/%E8%BF%90%E7%BB%B4/" style="font-size: 16.954465273090698px;" class="tag-cloud-link">运维</a> <a href="/tags/ios/" style="font-size: 17.534456402795904px;" class="tag-cloud-link">ios</a> <a href="/tags/flutter/" style="font-size: 13.230081714396063px;" class="tag-cloud-link">flutter</a> <a href="/tags/Java/" style="font-size: 12.643233939908264px;" class="tag-cloud-link">Java</a> <a href="/tags/%E5%B0%8F%E6%8A%80%E5%B7%A7/" style="font-size: 17.947659272696427px;" class="tag-cloud-link">小技巧</a> <a href="/tags/bug/" style="font-size: 19.735391572437695px;" class="tag-cloud-link">bug</a> <a href="/tags/kotlin/" style="font-size: 17.329153411499526px;" class="tag-cloud-link">kotlin</a> <a href="/tags/minecraft/" style="font-size: 16.716009881429116px;" class="tag-cloud-link">minecraft</a> <a href="/tags/rust/" style="font-size: 11.470502672656426px;" class="tag-cloud-link">rust</a> <a href="/tags/flink/" style="font-size: 17.202035738435445px;" class="tag-cloud-link">flink</a> <a href="/tags/c/" style="font-size: 10.755399282408273px;" class="tag-cloud-link">c</a> <a href="/tags/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/" style="font-size: 14.393445679296402px;" class="tag-cloud-link">机器学习</a> <a href="/tags/php/" style="font-size: 13.895263400494294px;" class="tag-cloud-link">php</a> <a href="/tags/redis/" style="font-size: 17.44120584134371px;" class="tag-cloud-link">redis</a> <a href="/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" style="font-size: 8.3474793942482px;" class="tag-cloud-link">设计模式</a> <a href="/tags/%E7%AE%97%E6%B3%95/" style="font-size: 15.27017450200117px;" class="tag-cloud-link">算法</a> <a href="/tags/go/" style="font-size: 15.984463040592377px;" class="tag-cloud-link">go</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>