人在无端微笑时，不是百无聊赖，就是痛苦难当。——王小波 分享一个通过css实现的卡片悬停效果 代码地址：cards: 悬浮卡片 在线演示：Document <p><img src="/img/oss/picGo/20230730191957.png"></p> </article><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%89%8D%E7%AB%AF/">前端</a></div><div class="post-share"><div class="social-share" data-image="/img/head.png" data-sites="facebook,x,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.6/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.6/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><a class="pagination-related" href="/2023/07/31/jenkins%E9%85%8D%E7%BD%AE%E5%B9%B6%E8%A1%8C%E9%A1%B9%E7%9B%AE%E6%95%B0%E9%87%8F/" title="jenkins配置并行项目数量"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info"><div class="info-1"><div class="info-item-1">上一篇</div><div class="info-item-2">jenkins配置并行项目数量</div></div><div class="info-2"><div class="info-item-1"> 纯洁的灵魂，是世界上最珍贵的东西——爱默生 配置方式有小改动，现在在这里配置： 然后选择 就是这个执行者数量 </div></div></div></a><a class="pagination-related" href="/2023/07/29/pixelmatch/" title="pixelmatch"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-right"><div class="info-1"><div class="info-item-1">下一篇</div><div class="info-item-2">pixelmatch</div></div><div class="info-2"><div class="info-item-1"> 不读书的家庭，就是精神上残缺的家庭。——巴甫连柯 分享一个最小、最简单、最快的 JavaScript 像素级图像比较库 https://github.com/mapbox/pixelmatch </div></div></div></a></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><a class="pagination-related" href="/2021/10/26/COOL-UI/" title="COOL-UI"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2021-10-26</div><div class="info-item-2">COOL-UI</div></div><div class="info-2"><div class="info-item-1"> 人有欲望，就有了很多无用的东西，车子，钓鱼竿，篮球……乔想着这些买来只用过一两次的东西，开始认为极简生活，没什么不好。——灵遁者《结束》 今天又发现一个uniapp的UI库：COOL-UI 官方文档：https://uni-docs.cool-js.com/ 而且这个还包含了后端：https://cool-js.com/ 组件选择当然是越多越好啦~ </div></div></div></a><a class="pagination-related" href="/2022/07/11/vue3%E7%BB%84%E5%90%88%E5%BC%8Fapi/" title="vue3组合式api"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2022-07-11</div><div class="info-item-2">vue3组合式api</div></div><div class="info-2"><div class="info-item-1"> 自由自由，多少罪恶假汝之名以行。——罗兰夫人 这个思想上有点类似流程控制框架，将一个组件中的多个关注点分离、抽取，然后能进一步复用、编排 官方文档：https://v3.cn.vuejs.org/guide/composition-api-introduction.html#%E4%BB%8B%E7%BB%8D 使用上来讲，就是编写的api方式变了，举个例子： 下面是我实际写的一个小组件 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657<script lang="tsx">interface Props { msg: string; msgModifiers: { [key: string]: boolean; };}import { computed, onMounted, ref, Ref, toRefs, watch,...</div></div></div></a><a class="pagination-related" href="/2024/12/01/skew/" title="skew"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2024-12-01</div><div class="info-item-2">skew</div></div><div class="info-2"><div class="info-item-1"> 醉过才知酒浓，爱过才知情重。你不能做我的诗，正如我不能做你的梦。——胡适 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/skew CSS中的skew()函数：打造斜切效果在前端开发中，CSS transform属性为我们提供了强大的工具来操控元素的外观，而skew()函数正是其中一种常用的变换方式。本文将带你详细了解skew()的原理、用法以及它如何为你的网页增添设计灵感。 什么是skew()？skew()是一种 2D 变换函数，用于对元素进行斜切变换。简单来说，它会将元素沿着 X 轴或 Y 轴方向倾斜一定的角度，创造出一种动态的透视效果。它的应用场景广泛，包括按钮动画、卡片设计和图形变换等。 语法1transform: skew(ax, ay); ax：沿 X 轴的倾斜角度（可选，默认值为 0）。 ay：沿 Y 轴的倾斜角度（可选，默认值为 0）。 单位为角度（deg），也可以使用弧度（rad）或其他角度单位。 用法示例1. 基本应用 以下示例将一个矩形沿 X 轴倾斜 20...</div></div></div></a><a class="pagination-related" href="/2021/08/21/Failed-to-resolve-loader-less-loader/" title="Failed to resolve loader: less-loader"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2021-08-21</div><div class="info-item-2">Failed to resolve loader: less-loader</div></div><div class="info-2"><div class="info-item-1"> 但愿苍生俱饱暖，不辞辛苦出山林。一一于谦 本来我今天遇到这个问题了 1Failed to resolve loader: less-loader You may need to install it 我一看：你可能需要安装一下less-loader，我直接输入命令安装 1cnpm i less-loader 执行完毕，再次运行发现报错信息变了： 1TypeError: this.getOptions is not a function 原来是版本太高了，于是卸载 1cnpm uni less-loader 然后安装低版本的 1cnpm i less-loader@6.0.0 再次启动就好了 </div></div></div></a><a class="pagination-related" href="/2021/09/28/vue%E4%B8%ADslot%E6%8F%92%E6%A7%BD/" title="vue中slot插槽"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2021-09-28</div><div class="info-item-2">vue中slot插槽</div></div><div class="info-2"><div class="info-item-1"> Be weird. Your strangeness is your magic. 我们在进行vue开发中，经常会使用到slot插槽 插槽允许我们在父组件引用子组件时，在组件其中放一段可以带标签的元素，甚至放入其他组件等 例如我这里定义一个组件 12345678910111213141516171819<template> <div> <header><slot name="header" :user="user">-------</slot></header> <main><slot :user="user">默认内容</slot></main> <footer><slot name="footer" :user="user">-------</slot></footer> </div><...</div></div></div></a><a class="pagination-related" href="/2021/06/06/uniapp%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%8E%B7%E5%8F%96%E7%94%A8%E6%88%B7%E6%89%8B%E6%9C%BA%E5%8F%B7/" title="uniapp微信小程序获取用户手机号"><div class="cover" style="background: var(--default-bg-color)"></div><div class="info text-center"><div class="info-1"><div class="info-item-1"><i class="far fa-calendar-alt fa-fw"></i> 2021-06-06</div><div class="info-item-2">uniapp微信小程序获取用户手机号</div></div><div class="info-2"><div class="info-item-1"> 价值产生信心，信心产生热忱，而热忱则征服世界。——华特·H·柯亭姆 我们在uniapp开发中有时会需要获取用户的手机号 可以在官方文档找到对应的方法 这里注意一点，只能通过button进行点击获取 但我们这样获取到后还需要解密 比如我这里获取到的 123456789101112131415161718<template> <view><button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">点我获取手机号</button></view></template><script>export default { data() { return {}; }, methods: { getPhoneNumber(e) { console.log(e.detail.errMsg); console.log...</div></div></div></a></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info text-center"><div class="avatar-img"><img src="/img/head.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info-name">阿超</div><div class="author-info-description">我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度</div><div class="site-data"><a href="/archives/"><div class="headline">文章</div><div class="length-num">2338</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">36</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/VampireAchao"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2026/10/22/vllm/" title="vllm">vllm</a><time datetime="2026-10-22T02:39:37.000Z" title="发表于 2026-10-22 10:39:37">2026-10-22</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2026/10/21/jasna/" title="jasna">jasna</a><time datetime="2026-10-21T02:49:04.000Z" title="发表于 2026-10-21 10:49:04">2026-10-21</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2026/10/20/os-taxonomy/" title="os-taxonomy">os-taxonomy</a><time datetime="2026-10-20T03:28:02.000Z" title="发表于 2026-10-20 11:28:02">2026-10-20</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2026/10/19/llm-course/" title="llm-course">llm-course</a><time datetime="2026-10-18T16:54:24.000Z" title="发表于 2026-10-19 00:54:24">2026-10-19</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2026/10/18/orca/" title="orca">orca</a><time datetime="2026-10-17T18:28:34.000Z" title="发表于 2026-10-18 02:28:34">2026-10-18</time></div></div></div></div></div></div></main><footer id="footer"><div class="footer-other"><div class="footer-copyright"><span class="copyright">© 2025 - 2026 By 阿超</span><span class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo 8.1.1</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly 5.5.4</a></span></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="日间和夜间模式切换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js?v=5.5.4"></script><script src="/js/main.js?v=5.5.4"></script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><i class="fas fa-spinner fa-pulse" id="loading-status" hidden="hidden"></i><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="text-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span> 数据加载中</span></div><div class="local-search-input"><input placeholder="搜索文章" type="text"/></div><hr/><div id="local-search-results"></div><div class="ais-Pagination" id="local-search-pagination" style="display:none;"><ul class="ais-Pagination-list"></ul></div><div id="local-search-stats"></div></div><div id="search-mask"></div><script src="/js/search/local-search.js?v=5.5.4"></script></div></div></body></html>
