还记得刚上大学的时候，第一节编程课，老师说："不要让我抓到你们玩游戏，否则玩什么就让你们写什么"。当时什么也不会，也不敢玩。 如果现在能回到那节课，我就可以肆无忌惮的玩我的 贪吃蛇 了。。。。。。

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。 🌊 作者主页：海拥 🌊 作者简介：🥇HDZ核心组成员、🏆全栈领域优质创作者、🥈蝉联C站周榜前十 🌊 粉丝福利：粉丝群 每周送四本书，每月送各

1. stroke-dasharray 数与数之间用逗号或者空白隔开，指定短划线和缺口的长度。如stroke-dasharray:30 20;,效果如下: 2. stroke-dashoffset 如果不写stroke-dasharray属性,stroke-dashoffset…

因为最近课比较少，所以在codepen上逛的时间比较多，借此可以学习一些优秀的作品，昨天看到了一个很炫的星空，先给大家看看效果。 源码出奇的短，总共不过一百余行，代码的逻辑也写的浅显易懂，主要思路就是不同轨道的星星绕着中心点旋转，其次就是半径越大的星星在视觉上距离我们越近，因为…

在自己的专栏上写了十几篇文章了，都是与js有关的。暂时还没有写过关于css3的文章。css3，给我的感觉就是，不难，但是很难玩转自如。今天，就用css3来实现三个特效，希望这三个特殊能让大家受到启发，利用css3做出更好，更炫的动画效果，并且对比这三个特效和JS特效的对比，希望…

CSS3的动画相关的基础的属性基本都涉猎过了，个人认为，其中最复杂的是d:path()路径变形动画，超过3D，而位移、轨迹、旋转、缩放、斜切什么的，相对简单一些，但作为非动画设计师而言，灵活的掌握这些基本的动画加以无穷无尽的变换，就已经能做出很多华丽丽的效果了，这篇呢，源于做一…

大家好，这里是 UX（交互体验设计师）& 前端开发，并且还喜欢画画的 yuki！@yuneco。 在这篇文章里，为了能够更加轻松地去使用 Vue 和 css animation，基础的部分，将会跟大家一步步的详细解释。目标如下图↓所示，用 JavaScript 自由的控制动画。…

这是从2018“草莓音乐节”的宣传视频得到的灵感，海报的主题是错位拼贴分割重组，对我这种设计渣渣而言，看中的是其平面化，也就是说，用SVG+CSS3动画完全可以玩转。因为只涉及一些基础元素的位移、缩放构成的转场效果，相对来说比较简单，但创意很开脑洞。因为宣传视频比较长，所以把它…

通过使用 CSS、canvas 和 SVG 三种不同的方式实现同一个效果，反而成了对三种不同技术的最简单的介绍，这也是最后加上 canvas 实现的一部分原因，所以希望会对正在学些这些的初学者有所帮助...