2023年11月22日
background实现边线动画
摘要： 边线左侧划出，右侧收起，关键点就是 改变background-position的位置left -> right .div { background: linear-gradient(to right, #ec695c, #61c454) no-repeat right bottom; backgro 阅读全文
posted @ 2023-11-22 19:33 全玉 阅读(29) 评论(0) 推荐(0) 编辑
背景遮罩(蒙层)实现方法
摘要： 1. border 可响应事件，占据空间 border: 100px solid rgb(0,0,0,.5); 2. outline 不响应事件，不占据空间 outline: 100px solid rgb(0,0,0,.5); outline 支持 outline-color, outline-s 阅读全文
posted @ 2023-11-22 19:29 全玉 阅读(38) 评论(0) 推荐(0) 编辑
box-shadow内阴影实现各种效果收集
摘要： 1. 月牙 详见 一步步打造自己的纯CSS单标签图标库 .moon { display:inline-block; height: 1.5em; width: 1.5em; box-shadow: inset -.4em 0 0; border-radius: 2em; transform: rot 阅读全文
posted @ 2023-11-22 19:22 全玉 阅读(46) 评论(0) 推荐(0) 编辑
调试技巧sourcemap和定位相关
摘要： 1. webpack的完整sourcemap 调试代码，要映射回原始文件，devtool的sourcemap模式是不行的，会丢失loader的映射信息，导致映射结果是一个半源码半编译的文件，cheap-module-source-map可以，cheap只需要行信息，module会关联loader的s 阅读全文
posted @ 2023-11-22 15:43 全玉 阅读(39) 评论(0) 推荐(0) 编辑
webpack的html模板中插入变量写法
摘要： vue-cli文档中的描述如下 Index 文件# public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。另外，Vue CLI 也会自动注入 resource hint (preload/prefetch、mani 阅读全文
posted @ 2023-11-22 09:09 全玉 阅读(150) 评论(0) 推荐(0) 编辑