话不多说了，先上一张Demo图，实现的功能有：左侧图例、右侧瀑布图、鼠标移入弹出当前坐标对应的数据信息（有优化的空间，大家自由发挥）。 这里不多做解释了，都是一些原生标签还有vue绑定的事件，可以根据实际项目情况自己封装成组件，我这里是写在一起的。 方法调用这就不解释了，离开页…

大家好，我是 Steven。 我们试试用最少的 JavaScript，尽量使用 CSS 以及最简单的 HTML 结构去实现，那我们就开始啦。 打开 CodePen 编辑器，在 HTML 的部份加入一个 <div>，id 名为 image。 去到 CSS 的部份，新增 …

使用伪元素和元素的颜色差，让伪元素向我们的方向移动，实现影子效果。 使用transform属性，计算每一个块元素的位置组成一个数字。 使用transition属性给line::before和line::after设置过度动画。 通过css属性选择器，获取自定义属性的值。通过变换…

将介绍一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相关属性，制作一些稍微复杂、酷炫的背景。 通过本文，你将会了解到 CSS background 中更为强大的一些用法，并且学会利用 background 相关的一些属性，采用不同的…

1-1. 设置input 的placeholder的字体样式 1-2. 单行和多行文本超出省略号 1-3. 负边距使用技巧 1-4. 定位同时设置方位情况 1-5. 相邻兄弟选择器之常用场景 1-6. outline属性的妙用技巧 1-7. 隐藏滚动条或更改滚动条样式 1-8.…

-webkit-box-reflect 是一个非常有意思的属性，它让 CSS 有能力像镜子一样，反射我们元素原本绘制的内容。 上一次写它，它的兼容性还非常非常的惨淡，但是到今天，虽然还是一个 Non-standard 的语法，但是兼容性已经大有改观，并且利用它，我们可以实现非常…

觉得它的风格很独特，尤其是其中一些边框。 嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。 谈到边框，首先会想到 border，我们最常用的莫过于 solid，dashed，上图中便出现了 dashed。 除了最常见的 solid，dashed，CSS b…

本文将会和这篇 -- CSS 奇思妙想边框动画类似，讲一些文字效果，利用不同的属性搭配，实现各式各样的文字动效。 在写各种 DEMO 的时候，有的时候一些特殊的字体能更好的体现动画的效果。这里讲一个快速引入不同格式字体的小技巧。 当我们相中了一个我们喜欢的字体，它也提供了非常快…

前段时间公司需要搞个抽奖活动，按照产品要求就写了个翻牌抽奖。最近抽空封装成翻牌抽奖的插件turn-lucky