![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
文章平均质量分 58
南张人
一枚喜欢运动、喜欢骑行的码农
展开
-
RegExp 误用解析
JS 中创建正则表达式有两种写法:// 第一种写法var regExp = /hello/;regExp.test('hello world'); // true// 第二种写法var regExp = new RegExp('hello');regExp.test('hello world'); // true本文要说明的是 RegExp 使用时要注意的问题,R...原创 2020-02-08 12:59:18 · 513 阅读 · 0 评论 -
CSS 画圆环
画圆环思想很简单:首先画两个圆,设置不同的背景色;然后让两个圆的圆心重合即可。难度系数☆☆HTML<div class="container"> <span class="ring-style"></span></div>解析:此处有父容器CSS.container { position: rela...原创 2019-12-22 18:27:50 · 3194 阅读 · 1 评论 -
CSS实现地图中定位的波动效果
地图中的定位效果:看到这么酷炫的效果,你是不是很想知道是怎么做到的?Step 1创建一个container div,并选取一张地图背景图片,CSS设置如下:#container { position:relative; width: 600px; height: 500px; background: url(map.jpg);}这里有...原创 2019-10-30 00:38:00 · 1449 阅读 · 0 评论 -
灵活使用 border-radius
border-radius 是一个复合 CSS 属性,其包含的简单属性为: border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius border-top-left-radius 定义 ...原创 2019-10-30 00:27:50 · 379 阅读 · 0 评论 -
CSS 绘制三角形
Step 1一般我们使用border时是这样的:#border-style { width: 50px; height: 50px; border-top: 1px solid black; border-left: 1px solid black; border-right: 1px solid black; border-bottom:...原创 2019-10-30 00:16:15 · 168 阅读 · 0 评论 -
漫天纷飞“流星雨”
本文通过CSS的简单应用实现了流星雨的效果。正文只讲述单个流星雨的实现方式,多个的效果只需要对单个的动画起始点、宽度稍加修改即可,具体示例见文末github地址。难度系数☆☆☆☆☆效果图思路流星雨的实现分为三部分:(1)用border属性实现直角三角形。三角形的实现可以参考 CSS绘制三角形(2)给直角三角形添加圆形效果,弱化直角形状的棱角(3...原创 2019-10-27 01:15:29 · 392 阅读 · 0 评论 -
webpack 项目添加单元测试
本例使用 karma、mocha、chai 为 webpack 项目添加单元测试。其中,karma 是测试过程管理框架,mocha 是运行测试用例的框架,chai 是单元测试断言库。下面一步步开始实践吧:1、项目目录src:源代码目录 test:测试用例目录 unit:测试文件目录 cases.js:测试用例入口文件 karma.conf.js:karma 配置文件 2...原创 2019-10-20 22:31:19 · 736 阅读 · 0 评论 -
CSS 实现向右导航 icon
对于看过CSS绘制三角形的童鞋来说,实现向右导航 icon 很好理解,可能大家稍加即可知晓实现方式。是的,只需要设置一个元素的相邻 border,之后旋转一下即可。HTML<span id="right-arrow"></span>CSS#right-arrow { display: inline-block; width: 17px;...原创 2019-02-23 18:46:09 · 974 阅读 · 0 评论 -
CSS 实现关闭 icon
关闭 icon 有两条线组成,所以很简单的设想就是两条横线,分别旋转不同角度即可。HTML<span id="close"></span>CSS#close { display: inline-block; width: 23px; height: 2px; background: red; transform: ...原创 2019-02-23 18:26:27 · 2384 阅读 · 0 评论 -
媒体查询实现响应式布局
本文主要介绍 @media 查询的使用。通过媒体查询,在不同的屏幕尺寸下,可以设置不同的样式。以此,可以完美解决不同屏幕适配的问题。话不多说,先来看看效果:CSS@media screen and (max-width: 400px) { .btn { background-color: lightblue; }}@media screen and (min-width...原创 2019-01-22 22:57:55 · 3186 阅读 · 0 评论 -
鼠标经过放大元素
如题,这是一种访问网页时经常会出现的效果。当鼠标经过某一图片或某一容器时,对应元素会有一个放大的动画,有木有好奇这是怎么实现的?那就继续往下看吧!难度系数☆☆☆效果图思路本文用到的动画效果不是自定义 @keyframes 了,而是 CSS 的 transition 属性。transition 属性用来设置元素变化的过渡效果。例如:元素正常宽度是 100px,鼠标...原创 2019-06-30 11:19:09 · 1852 阅读 · 0 评论 -
app 图标右上方消息计数
突发奇想,实现了一下手机 app 图标右上方的消息计数功能。效果类似我们平时在手机上看到的消息计数,如下图:实现思路很简单:首先创建一个模拟 app 图标的 div 元素,设置宽度高度和圆边框;之后给该 div 元素设置 ::after 伪元素,用作消息计数;这里需要给伪类设置宽度高度、圆边框、背景颜色、字体颜色,关键在于基于 div 元素的宽度高度设置伪类的位置。HTML<...原创 2018-10-28 21:36:17 · 1119 阅读 · 0 评论 -
按钮大小变化动效
我们经常会看到有的网页上按钮由大变小、再由小变大,这样不停变化的情况。今天就来和大家介绍如何实现这种效果。首先将效果的实现过程分为两个阶段: 第一阶段,按钮由大变小; 第二阶段,按钮由小变大。说到这里,有没有联想到 CSS3 的自定义动画规则 @keyframes,是的,通过 @keyframes 就可以实现两个动画阶段的控制。而按钮大小变化的效果,可以通过 C...原创 2019-03-25 21:33:13 · 3060 阅读 · 0 评论 -
多图滚动切换
写在前面的话之前写多图切换时有童鞋建议多写写动画效果,也想和大家多多分享的,怎奈想象力不足,一直没找到合适的效果。最近在网上无意看到了一个多图滚动切换的效果,感觉看起来不错,遂写下来和大家分享一下。思路动画效果技术上严格依赖于以下几点,请大家熟练掌握,然后看下文就比较好理解了 transform 属性 animation 属性 @keyframes 自定义动画规则 本文...原创 2019-04-27 19:24:29 · 860 阅读 · 2 评论 -
Uglify 压缩特定规则方法名、变量
UglifyJS 压缩特定规则的方法名、变量时,需要配置 mangle 属性。以 webpack 插件为例:config.optimization.minimizer.push( new UglifyJsPlugin({ ***, uglifyOptions: { ***, mangle: { ...原创 2019-05-27 18:20:12 · 1906 阅读 · 0 评论 -
加载动画之菊花旋转
写在前面的话“读书破万卷”,不仅仅在于“万”,更重要的是要“破”。给大家推荐一本书《远见》,对于即将步入职场或者正在职场拼搏的你来说,值得一看!看到目前很多网站的加载效果用的是 gif 图片,于是很好奇了,仅仅用 CSS 怎么实现呢?干货来袭,请接招。难度系数☆☆☆☆效果图思路CSS 用于修饰 HTML,所以即便是再简单的效果,都是要依赖于 HTML 的,而本例效果...原创 2019-06-23 12:22:06 · 1110 阅读 · 1 评论 -
图片亮度变化动效
难度系数☆☆效果图思路(1)CSS 动画效果依赖于以下知识点的掌握:animation 属性 @keyframes 自定义动画规则(2)图片亮度变化需要用到 filter 属性的 brightness 方法。brightness 的介绍如下:brightness 会给 DOM 元素应用亮度的线性变化效果 其值为百分数时,如果值是 0%,图像会全黑;值是 100%,...原创 2019-08-20 00:26:47 · 740 阅读 · 0 评论 -
加载动画之线条伸缩
难度系数☆☆☆效果图思路通过 3 个线条高度的动态变化实现加载动画,为了突出效果,给线条增加了阴影。对动画而言,@keyframes 和 animation 是必不可少的技巧。同时本例中使用了 first-child 和 nth-child 选择器,用于给特定位置的元素添加其特有的动画属性。HTML<div class="loading-container"&g...原创 2019-08-27 22:46:28 · 412 阅读 · 0 评论 -
图标输入框(二)
本文介绍如何使用 input 元素, CSS 的 content 属性和伪类 :before 实现带图标的输入框效果。原创 2017-11-28 22:54:22 · 461 阅读 · 0 评论 -
CSS 实现对号效果
实现对号效果,一种思路是利用现成的符号,直接在网上搜索到√,插入页面。另一种思路是本文要介绍的用 CSS 实现,思路是: 给块级元素设置宽度和高度 设置元素相邻的两个 border 旋转元素 HTML<divclass="check-style-unequal-width"></div>解析: 此处需要使用块级元素 ...原创 2018-09-23 21:51:44 · 18427 阅读 · 0 评论 -
NodeJS 实现可下载文件的 URL
如题,有时我们需要在后端创建一个可下载文件的 URL,在 NodeJS 中实现如下: // The must headers. res.setHeader('Content-type', 'application/octet-stream'); res.setHeader('Content-Disposition', 'attachment;filename=aaa.t...原创 2018-09-12 00:14:27 · 5258 阅读 · 0 评论 -
CSS过渡效果
CSS过渡效果用到的是 transition 属性,transition 用于将元素从一种样式的效果逐渐转变为另一种样式的效果。它是一个复合 CSS 属性。原创 2017-08-01 23:26:03 · 1181 阅读 · 0 评论 -
transform 属性之 transform-origin
定义 transform-origin 属性用来设置 transform 变换的基点位置。默认情况下,基点位置为元素的中心点。语法 transform-origin: x-axis y-axis z-axis 名称 值 描述 x-axis 位置(left、center、right)/ 百分数 / 数值 x 轴基点坐标 y-a原创 2018-01-11 22:54:04 · 14523 阅读 · 5 评论 -
固定元素宽高比
CSS 实现元素大小随页面动态变化,同时宽高比保持不变的效果。原创 2017-12-07 23:40:09 · 520 阅读 · 0 评论 -
图标输入框(一)
本文介绍如何使用 input 元素和 CSS 的 background-image 属性来实现带图标的输入框。原创 2017-11-23 22:39:24 · 1129 阅读 · 0 评论 -
CSS 浮动规则
CSS 浮动的规则原创 2017-08-16 21:20:25 · 440 阅读 · 0 评论 -
CSS文本居中问题
水平居中水平居中比较简单,将对应的html元素text-align属性值为center,其子元素就会水平居中。垂直居中垂直居中分为单行文本和多行文本两种:单行文本单行文本垂直居中,设置文本元素的line-height属性值为元素高度。多行文本文本元素为div时,可以设置div的vertical-align属性值为middle,并且设置display属性值为table-c原创 2017-06-01 23:12:26 · 4662 阅读 · 0 评论 -
CSS长度单位
CSS长度单位原创 2017-03-15 23:41:08 · 403 阅读 · 0 评论 -
Web安全颜色
Web安全颜色原创 2017-03-15 23:21:11 · 677 阅读 · 0 评论 -
CSS 浮动基本概念
浮动在文档布局中是一个非常重要的概念,CSS 允许浮动任何元素。浮动的特性:1. 浮动元素会被从正常文档流中删除,不过还是会影响文档的布局2. 浮动元素周围的外边距不会被合并3. 距离浮动元素最近的块级祖先元素是它的包含块4. 浮动元素会生成一个块级框,不管它本身是什么原创 2017-08-08 20:54:30 · 3556 阅读 · 0 评论 -
transform 属性之 matrix 方法其二
本文为解析 transform 属性系列的第三篇,解析 matrix 方法的第二篇,重在介绍通过 matrix 方法实现 rotate 和 skew 之细节。原创 2017-12-29 17:29:10 · 905 阅读 · 0 评论 -
node 出错 core 文件调试
调试目标找到 core 文件中 JS 调用堆栈,从而结合代码找出致错原因调试工具调试 node 程序问题导致的 core 文件,需要用到 lldb 和 llnode,llnode 是基于 lldb 的一个插件。lldb 是一个类似 gdb 的调试器,llnode 主要用于输出 js 调用栈信息。具体安装步骤请参考 https://github.com/nodejs/llnode。 ...原创 2018-07-12 20:59:01 · 3106 阅读 · 0 评论 -
纯 CSS 实现图片轮播
理论基础CSS3 animation 属性和 @keyframes 规则主体思想准备相同大小的多个图片 将要展示图片横排放在一个图片容器里面 在图片容器外再加一个展示容器,展示容器大小为图片大小 给图片容器添加自定义动画,在动画不同阶段设置递增的偏移值注意事项动画效果分为切换和停留两部分 自定义动画阶段与图片数量相关 动画各阶段偏移值与图片大小相关 本文中示例最后一个...原创 2018-05-27 13:07:32 · 101801 阅读 · 55 评论 -
CSS position 定位
近期在找工作,发现 position 定位相关问题提到的比较多,包括自己之前参加公司面试,也会问到一些 position 定位相关问题,可是往往有将近一半的人不能够对 position 有一个清晰明确的描述。于是决定在这里把 position 属性介绍一番。定义规定元素的定位类型。属性值static:默认值。元素按照正常文档流呈现。absolute:生成绝对定位的元素,该元...原创 2018-04-27 23:19:59 · 321 阅读 · 0 评论 -
CSS 优先级
优先级顺序(由高到低)!important内联样式ID选择器类选择器,属性选择器,伪类标签选择器,伪元素通配选择符,关系选择符,否定伪类 举例如下: id 选择器:#my-id 类选择器: .my-class 属性选择器: [type=”button”] 伪类选择器: :hover, :link 标签选...原创 2018-03-03 16:59:32 · 444 阅读 · 0 评论 -
VSCode 配置 Sonar Lint
写在前面的话:本文讲解如何在 VSCode 中关联并应用已配置好的 Sonar Lint 规则。因此,本文前提是 Sonar Server 已经被配置完备。本文仅针对 VSCode 插件 SonarQube:本文所指配置文件均是为了在 VSCode 中应用 Sonar Lint 规则而添加的 SonarQube 插件识别的配置文件。-------------原创 2018-02-04 22:07:03 · 11654 阅读 · 2 评论 -
transform 属性之 matrix 实例
不了解 transform 属性的 matrix 方法怎么使用?没关系,请先看这三篇文章: - transform 属性之简单变换方法 - transform 属性之 matrix 方法其一 - transform 属性之 matrix 方法其二matrix 回顾matrix 定义matrix(a, b, c, d, tx, ty)matrix 转换公式 x’ =原创 2018-01-24 21:33:17 · 1270 阅读 · 0 评论 -
transform 属性之 matrix 方法其一
本文为解析 transform 属性系列的第二篇,第一篇详细介绍 2D 转换方法 translte、rotate、scale 和 skew,不了解的童鞋请先移步至上一篇,不然对本篇理解起来会有些困难。本篇重点介绍 2D 转换方法 matrix。相对于一般 CSS 的应用来讲,matrix 算是一个 ** 了,这里边涉及到的数学概念较多,对于一些概念不清楚的读者,还望仔细上网查阅。前方高原创 2017-12-28 22:20:37 · 2262 阅读 · 0 评论 -
transform 属性之简单变换方法
本文是解析 transform 属性系列的第一篇。定义transform 属性用于给元素应用 2D 或 3D 变换。通过该属性,我们可以对元素进行旋转、缩放、移动或倾斜。语法 transform:none | transform-functions;2D 转换2D 转换常用的方法如下:translaterotatescaleskewmatri原创 2017-12-28 21:45:55 · 2693 阅读 · 0 评论 -
CSS2.1 17个命名颜色
CSS2.1中17个的命名颜色原创 2017-03-15 21:36:51 · 680 阅读 · 0 评论