位置标记
CSS实现的地点定位图标使用CSS实现的地点定位图标,只需要CSS的mask以及aspect-ratio等关键属性实现,定位图标的颜色可通过background属性进行自定义。10行以内代码实现的定位图标非常的轻量级
心形
CSS实现的心形图标,心形形状图片边框效果一款使用CSS实现的心形图标,使用了CSS的clip-path、mask-border以及aspect-ratio等关键属性实现,爱心可随意设置颜色,在img图片场景中使用爱心样式「class=...
吃豆子
CSS实现的吃豆豆图标使用CSS实现的吃豆子游戏主角图标,使用到了CSS的clip-path、background以及border-radius等属性实现而成。使用CSS实现的图标无需依赖各类三方资源更加轻量级
缺角图片
使用 CSS 的 mask 蒙层属性设置 border-radius 实现缺角图片效果使用 CSS 的 mask 遮罩效果,以最少的代码创建倒置半径角。无额外元素、无伪元素、仅使用 CSS 变量进行实现,单个效果如下图所示,您可以在此效果的基础上进行组合再创作实现更多有创意的效果。
404页面
CSS 探照灯下的404页面动画效果使用CSS实现的一款探照灯下的404页面效果,整个页面背景呈黑色如同黑夜一般,404在探照灯的左右晃动照射下欲隐欲现,特别有创意的一款404页面效果,应用此404页面到你的项目中一定会赚足回头率!
糖果开关
CSS 创意棒棒糖开关切换按钮,切换次数越多糖果越小!一款超有创意的棒棒糖开关切换效果,底层就是checkbox,外观基于CSS实现了棒棒糖的切换按钮,通过多次的切换操作棒棒糖会因为「摩擦」而逐渐减小,下方是切换前后的对比图片。切换的事件效果是通过...
跳跳小游戏
Canvas 实现的果冻跳跳跳生存冒险类小游戏,挑战性、趣味性十足!基于Canvas + JavaScript实现的果冻冲冲冲小游戏,该游戏改编自 iOS 上的游戏「Go Go Jelly」,游戏规则:点击屏幕主人公小果冻向上跳动,收集星星并消灭游动的小鸟以获...
谢尔宾斯基
Canvas 实现可自定义梯度的谢尔宾斯基(Sierpinski)三角形递归分形效果这是一款通过 JavaScript 在 Canvas 画布中响应点击事件实现的「谢尔宾斯基(Sierpinski)三角形」分形效果,可自由设置梯度,生成不同节数的三角形效果,还有一款通过「Jav...
悬浮气泡
纯CSS实现的气泡上下浮动动画效果使用纯CSS实现的气泡上下浮动动画效果,使用到了CSS 的 box-shadow、backdrop-filter、animation、aspect-ratio等关键属性实现,泛着微光的气泡在黑...


