蓦然JL

摘要： 最近在项目中碰到这样一个布局，有一个列表，先按照 4 * 2 的正常顺序排列，当超过 8 个后，会横向重新开始 4 * 2 的布局，有点像一个个独立的分组，然后水平排列，如下 图中序号是 dom 序列，所以其实这这样的一个顺序 很多同学可能会想到给子元素分组（通过 JS将原数组拆分组合成一个二维数组 阅读全文

摘要： 在最新的Chrome 115中，令人无比期待的CSS 滚动驱动动画(CSS scroll-driven animations)终于正式支持了\~有了它，几乎以前任何需要JS监听滚动的交互都可以纯 CSS 实现了，就是这么强大，一起了解一下吧 温馨提示：文章略长，建议收藏后反复查阅 一、快速入门 CS 阅读全文

摘要： 羽化是photoshop术语，羽化原理是令选区内外衔接部分虚化，起到渐变的作用从而达到自然衔接的效果，是ps及其其它版本中的处理图片的重要工具。 一、羽化的原理 羽化其实就是将边缘变得模糊，在 CSS 中其实就是创建一个边缘模糊的遮罩（mask），也就是需要一种半透明的渐变。 关于遮罩，这里简单介绍 阅读全文

摘要： 问题： 如果在img上直接使用CSS3的border-radius和box-shadow应用在图片，浏览器并不会完全显示。前面在《jQuery和CSS3给图片制作圆角》中说过其解决方法，就是把图片作为背景图片，这样我们就可以应用任何样式来修饰图片，而且此时浏览器也会完美的呈现出来。 解决方法： 要让 阅读全文

摘要： 一、 css3 transform 变换 translate(x,y) 设置盒子的位移 scale（x,y)设置盒子缩放 roate（dog) 设置盒子的旋转 skew（x-angle,y-angle） 设置盒子的斜切 perspective 设置透视距离 transform-styoleflat 阅读全文

摘要： 在一个复杂的背景上添加文字，文字能清晰展示，并尽可能的保留原背景的话，使用毛玻璃的效果去处理是非常合适的。 一、背景图毛玻璃 在 PhotoShop 中，毛玻璃主要使用 高斯模糊 和 羽化 。说白了就是模糊。 在 CSS 中，想要实现模糊效果，可以使用 滤镜 。背景通常设置成黑色、灰色或者白色，然后 阅读全文

摘要： [Intervention]Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupte 阅读全文

摘要： disable-devtool 可以禁用所有一切可以进入开发者工具的方法，防止通过开发者工具进行的 ‘代码搬运’。 该库有以下特性: 1、支持可配置是否禁用右键菜单2、禁用 f12 和 ctrl+shift+i 快捷键3、支持识别从浏览器菜单栏打开开发者工具并关闭当前页面4、开发者可以绕过禁用 (u 阅读全文

摘要： 在v-html属性标签的标签上添加 getImg 方法 <div class="content" v-html="content" @click="getImg($event)"></div> getImg方法，通过 $event 可获取用户当前点击的元素相应的内容，这里可以获取所点击图片对应的sr 阅读全文

摘要： 1. 禁用鼠标事件、移动端禁止图片长按保存功能（PC端禁止鼠标点击事件，移动端禁止触摸事件还有长按事件） .no-events { pointer-events: none } 2.移动端禁止用户长按文字选择功能 .unselect { -webkit-touch-callout:none; -we 阅读全文