借用repeating-linear-gradient实现一把刻度尺(ruler)?

2019-09-03
阅读 4 分钟
4.8k
像刻度这种东西都是重复性的,说到重复我就想到了repeating-linear-gradient,看名字就能知道是重复线性渐变,它能更方便的实现隔行变色的功能,如果你想画一个背景,它是重复、隔行的,那么用它就没错了;

讲道理,仅3行核心css代码的rate评分组件,我被自己秀到头皮发麻?‍♂️

2019-08-19
阅读 4 分钟
2.1k
像rate评分组件一般都用javascript写,大概一年前,我在简书写过一篇文章原生Javascript实现星星评分组件,感兴趣的可以去看一下,很久之前写的,我不知道之前的代码有多啰嗦,所以这次将是一个全新的尝试,用css实现一个rate评分 ❗ 核心代码也就三行?

如何把css'content的操作跟价值发挥到最大?

2019-08-16
阅读 8 分钟
1.6k
content属性需要与before及after伪元素配合使用,作用是可以定义伪元素所显示的内容,本文主要列举content的可选值及实用的案例与技巧?

contenteditable跟user-modify还能这么玩🌚

2019-08-12
阅读 2 分钟
2.3k
html中的contenteditable,他是一个全局属性,可以大致理解为"可以使一个元素处于可编辑状态",像极了textarea,不过还是存在许多不足跟问题,比如没有change钩子等,本文不作深入探讨❌

css掩人耳目式海浪动效?,这可能是最简单的实现方式了吧?

2019-08-09
阅读 2 分钟
2k
首先画一个简单的盒子:利用::before与::after画两个圆角值(radius)不同的不规则圆形:父元素设置overflow: hidden最后加上animation动画让两个不规则圆形旋转起来即可?

你可能不知道的css骚操作 — 表单验证?‍♂️

2019-08-08
阅读 2 分钟
2.3k
表单元素中,有一个pattern属性,可以自定义正则表达式(如手机号、邮箱、身份证..);valid伪类,可以匹配通过pattern验证的元素;invalid伪类则相反,可以匹配未通过pattern验证的元素;于是就可以随便搞啦,上面的效果图只是做一些简单的效果,更多效果以及限制大家就发挥自己的想象力咯;