UI
8篇文章 · 0订阅
  • 设计师的专属魔法，用SVG动画重现布尔运算的设计过程
    这是在作图时突然迸发的灵感（是的，偶尔也会有那么一瞬间头脑开窍），作为设计师小伙伴们，平时用的最多的应该是布尔运算吧，基础图形的加加减减，得到任意的形状。就不说经典的Apple了，比如网易云音乐图标，你如果直接放上这个，似乎没什么。 但放上布尔运算过程的设计稿（所有基础图形的轮廓…
    CSS 设计 SVG
  • 一个少女心满满的例子带你入门 Canvas
    canvas入门 本文首发于我的个人博客：http://cherryblog.site/ github项目地址：https://github.com/sunshine940326/canvasStar 项目演示地址：https://sunshine940326.github.io…
    JavaScript 前端 Canvas
    一个少女心满满的例子带你入门 Canvas
  • css：默认的checkbox、input、radio太丑了？我来教你改变使用纯css3改写的带动画的默认样式
    项目的github地址为： https://github.com/sunshine940326/css3formeledemo本文首发于我的个人博客，http://cherryblog.site/ ；欢迎大家查看我的其他博客最近在做公司后台的优化项目，拿到设计稿一看，设计师觉得…
    CSS 前端
    css：默认的checkbox、input、radio太丑了？我来教你改变使用纯css3改写的带动画的默认样式
  • SASS: 简单点，写 BEM 的方式简单点
    SASS: 简单点，写 BEM 的方式简单点
    CSS SCSS
    SASS: 简单点，写 BEM 的方式简单点
  • 笔记：SVG 环形动画（进度条）原理
    使用 SVG 制作环形进度条，主要使用的是 SVG 本身的 stroke-dasharray 和 stroke-dashoffset。
  • canvas 基础系列（二）之实现大转盘抽奖
    定义点击事件，当点击旋转按钮，执行rotateWheel() 方法，该方法将动态改变全局变量 starRadian的值，并调用 window.requestAnimationFrame()方法实现逐帧旋转动画。 之所以在绘制最开始对画布做清理，是为了完成逐帧动画。 我们可以想象…
    Canvas
  • UI设计师福利之零基础入门SVG路径动画（看最后的更正部分）
    先看一个动画效果，这种小飞机沿路径飞行(路径部分线段变成绿色是录屏软件出了问题)。 这种动画效果最常见于发送信息后，两个不同位置之间的导航指向等等，总之使用场景还是很多的。对于SVG动画来说，这种效果是最最简单不过，只需要一个路径外加几个属性的简单设置就能完成，简单到不算飞机图…
    设计 SVG