2018年10月12日 by 张 鑫旭 阅读 31616 次, 今日 8 次

CSS :visited伪类选择器你以为很简单,麻鸭,估计是所有伪类选择器里面最不简单,最怪异的了。很多奇怪的特性你想都想不到,进来看看,一定会有别样的收获的。
阅读全文…
标签: :visited, color, css相关, getComputedStyle, 伪类, 选择器
发布在 CSS相关 | 9 条评论 »
2018年10月3日 by 张 鑫旭 阅读 50554 次, 今日 7 次

只要是路径填充,都有两种规则,nonzero和evenodd,无论是SVG中的路径填充,还是Canvas中的路径填充,如果还有其他和路径相关的技术(甚至设计软件),也离不开这两种填充规则。换句胡说,这是超越各种语言,普世通用的技能点。下面,看看我能不能用足够精简的语言,尽可能让大家都搞懂这两种路径填充规则。
阅读全文…
标签: canvas, evenodd, fill, fill-rule, nonzero, 填充, 路径
发布在 Canvas相关, SVG相关 | 20 条评论 »
2018年09月30日 by 张 鑫旭 阅读 56845 次, 今日 4 次

伟大的安兹·乌尔·恭释放了一个超位魔法——拖拽献祭中的黑山羊魔法!凡是不能手写页面元素拖拽效果者,即死,需10日才能复活!顿时,无数前端手足无措,惊恐万分,仓皇而逃,但终究难逃一死。此时,一位小白前端横空出世,靠着解构此魔法的关键DataTransfer对象,破解了这个超位魔法,挽救了无数的前端开发,而其破解的详细信息已经记录在这篇文章中……
阅读全文…
标签: DataTransfer, dragend, dragenter, dragleave, dragover, dragstart, drop, dropEffect, effectAllowed, getAsFile, getAsString, getData, setData, setDragImage, 拖拽
发布在 JS API | 20 条评论 »
2018年09月21日 by 张 鑫旭 阅读 79204 次, 今日 10 次

可能有小伙伴并不知道,在网页中,我们直接Ctrl+V也是能够上传图片的。诶?真有这么厉害?没错,就是这么厉害!要不进去瞅瞅,现成的源代码,高保真的demo,包你分分钟学会这种姿势,哦,不,知识!
阅读全文…
标签: Ajax, clipboardData, File, FileReader, getAsFile, paste, 剪切板, 图片上传
发布在 JS实例 | 31 条评论 »
2018年09月9日 by 张 鑫旭 阅读 51671 次, 今日 9 次

输入框输入内容我们有时候为了方便,会直接粘贴内容,例如IP,网址,或者陌生人的手机号。但是,有时候我们复制的内容包含冗余信息,或者格式不准确,还需要重新编辑,体验就不好了。实际上,我们可以直接控制剪切板里面的复制的文字内容,可以实现粘贴的数据是我们希望的准确的数据格式,省去用户重新自己编辑的麻烦,可以有效提升用户的交互体验。
具体该如何实现呢?请看本文的介绍以及可以直接复制粘贴就可以使用的JS代码。
阅读全文…
标签: clipboardData, copy, getData, getSelection, paste, selectionEnd, selectionStart, setData, setSelectionRange, 剪切板
发布在 JS实例 | 25 条评论 »
2018年09月1日 by 张 鑫旭 阅读 42853 次, 今日 5 次

在web网页中,连续英文单词默认是不换行的,使用word-break虽然能够有效,但是,会有一个很明显的问题,这换行的位置把英文单词直接破开了,可读性下降。有没有什么方法,技能换行,又不破坏单词呢?可以试试HTML中的wbr标签。
阅读全文…
标签: break-all, wbr, white-space, word-break, word-wrap:break-word, 字符换行
发布在 HTML相关 | 13 条评论 »
2018年08月30日 by 张 鑫旭 阅读 73029 次, 今日 12 次

本文内容如题,介绍几个实现渐变虚线框的方法,介绍虚线滚动动画,实线滚动边框动画的实现,所有这些方法都是纯CSS实现,就算这些动画效果你实际项目用不到,但是其大开眼界的实现原理相信也会给你有所启示的。
一如既往,有demo实例,有源代码展示,和必要的截图,希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: border, css3, dashed, linear-gradient, loading, 动画, 渐变, 边框
发布在 CSS相关 | 37 条评论 »
2018年08月19日 by 张 鑫旭 阅读 111934 次, 今日 9 次

难免的,我们需要在CSS中内联SVG图形,以前我都是把SVG文件转换成Base64格式然后内嵌,最近发现,这并不是最好的方法,最好的方法是使用部分转义的SVG原始代码,兼容IE9+,而且颜色什么的可以直接在CSS中修改。这种方法具体真容是什么?有兴趣可以进去看下。其中有个炸裂的SVG在线压缩合并工具,相信你会喜欢的。
阅读全文…
标签: base64, download, encode, paste, SVG, SVG Sprite, svgo, 压缩, 文件上传, 背景图片
发布在 CSS相关, SVG相关 | 58 条评论 »
2018年08月11日 by 张 鑫旭 阅读 92423 次, 今日 6 次
差不多5年前,写了篇文章,介绍如何使用JavaScript和抛物线函数实现抛物线运动效果,实际上,纯CSS也是可以实现DOM元素的抛物线运动效果的。究竟如何实现呢?不妨进来一探究竟……
阅读全文…
标签: animation, css3, cubic-bezier, timing function, 抛物线, 水波, 波纹, 贝塞尔曲线
发布在 CSS相关 | 25 条评论 »
2018年08月6日 by 张 鑫旭 阅读 68911 次, 今日 22 次
今天天气不错,瞒着老婆去参加ChinaJoy,嘿嘿,好多周边,嘿嘿,好多萌妹子。突然,旁边一个戴眼镜的小胖子一声大叫:“看,for..in和for..of在那里吵架!”
我顺着望去,只见2点钟方向有一群穿着格子衫背着电脑包的人在围观什么,我立马发现事情不简单,就跟着过去围观,结果意想不到的事情发生了……
阅读全文…
标签: ES6, for..in, for..of, forEach, 枚举, 迭代, 遍历
发布在 JS API | 71 条评论 »