地yu荒冢 - 博客园

2025年4月3日

摘要：在 CSS 中实现高度不定的展开收起动画时，可以通过以下方案避免卡顿：最佳方案：CSS Grid 的 grid-template-rows 过渡利用 CSS Grid 布局的特性，通过 fr 单位实现平滑过渡，避免直接操作 height 属性。 1 <div class="container"> 阅读全文

posted @ 2025-04-03 14:53 地yu荒冢阅读(124) 评论(0) 推荐(0)

2025年3月27日

鼠标控制CSS矩阵变换示例

摘要：鼠标控制CSS的transform matrix来实现缩放和移动： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 #target { 6 width: 200px; 7 height: 200px; 8 background: #3498db; 9 阅读全文

posted @ 2025-03-27 10:12 地yu荒冢阅读(19) 评论(0) 推荐(0)

打开弹蒙层禁止下方页面滚动

摘要：弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是在蒙层出现的时候滚动页面，如果不加处理，蒙层底部的页面会开始滚动，实际上我们是不希望他进行滚动的，因此需要阻止这种行为。当弹出蒙层时禁止蒙层下的页面滚动，也可以称为滚动穿透的问题。以下是JQ的解决阅读全文

posted @ 2025-03-27 10:02 地yu荒冢阅读(81) 评论(0) 推荐(0)

2025年1月3日

SVG跟随页面滚动而移动

摘要：介绍SVG图形随着页面滚动而移动的效果通过预设SVG路径创建元素移动轨迹，然后使用JavaScript监听页面滚动事件，根据屏幕滚动高度调整SVG执行进度，获取当前进度的线条长度的定位使元素移动。 demo: 阅读全文

posted @ 2025-01-03 15:04 地yu荒冢阅读(41) 评论(0) 推荐(0)

2021年4月30日

关于vuex的使用

摘要：关于vuex的使用阅读全文

posted @ 2021-04-30 17:09 地yu荒冢阅读(250) 评论(1) 推荐(1)

2021年2月25日

WXS语法介绍

摘要：关于微信小程序开发 WXS 语法介绍阅读全文