css实现圆角渐变边框

前言

本文介绍css如何实现圆角渐变边框。

border-image 实现渐变边框

有了 border-image 之后,实现渐变边框变得很方便,

css实现圆角三角形,圆角三角形的实现

前言

大家新年好,今天给大家带来一个如何实现圆角三角形的方案,这个方案虽然可以实现,但是也是借助拼凑等方式来实现的,假如想一个div来实现圆角三角形,还是比较困难的。之前文章讲了如何实现对话框,里面介绍了三角形的实现方式。今天讲讲如何实现圆角三角形。

方案一:全兼容的 SVG 方案

想要生成一个带圆角的三角形,代码量最少、最好的方式是使用 SVG 生成。

使用 SVG 的 多边形标签 < polygon > 生成一个三边形,使用 SVG 的 stroke-linejoin="round" 生成连接处的圆角。

CSS实现直播点赞效果

前言

2022年马上过去了,迎接2023美好的一年。今天我给大家介绍一个如何用纯css先实现点赞动画效果,这个效果主要是用css的transition来实现的。 现在给大家介绍实现步骤。

我们首先要实现多个表情,一个 DOM 标签放入一个随机的表情。可以手动添加,当然也可以用css处理器sass来实现。如下:

CSS实现防止按钮重复点击,双击进入两次单机的情况

前言

之前有文章写过如何避免双击进入两次单机的情况,当然你也可以通过节流来实现,实现的方案很多,今天主要介绍一下如何通过css来实现,也就是css来实现按钮节流。

实现思路

我们可以用pointer-events 或者disabled等方式,对按钮进行节流,如何操作呢?

实现方案

pointer-events加css的动画来控制,也就是动画时长时间内只能点击一次,代码如下:

刨析webpack模块加载及模块联邦

前言

关于webpack模块联邦,之前有文章提及过,详细请看Webpack5 新特性模块联邦介绍和应用,关于webpack模块联邦,我们已经在项目中用过很多,本文主要讲讲webpack模块加载,及模块联邦的一些原理性的东西,希望对您有所帮助。

webpack模块加载

首先,我们看下webpack是如何加载一个模块的,通过解析webpack打包之后的代码,我们发现,webpack对CommonJS规范和ES6 module规范 ,解析模块加载差不多,仅仅在导出的时候有所区别,因为es6经常是export default方式导出。我们看源码如下: