Chenxin_nth
没事写点动画特效啥的
owenchen1994@gmail.com
获得徽章 0
赞了这篇文章
赞了这篇文章
赞了这篇沸点
赞了这篇沸点
【京剧脸谱-猫神】#javascript #svg
Demo+源码：
codepen.io
本来无聊在dribbble上找灵感，突然看到这张很好看的图片，一看作者还是中国人，还留下了联系方式！于是我联系到作者本人，要到了源文件，把这张静态图做成了svg动画。
强烈推荐一下这位作者，叫王空空。像这样好看的脸谱图他一共画了一百幅！有兴趣的可以看一下他的作品：dribbble.com
Demo+源码：
codepen.io本来无聊在dribbble上找灵感，突然看到这张很好看的图片，一看作者还是中国人，还留下了联系方式！于是我联系到作者本人，要到了源文件，把这张静态图做成了svg动画。
强烈推荐一下这位作者，叫王空空。像这样好看的脸谱图他一共画了一百幅！有兴趣的可以看一下他的作品：
dribbble.com
展开
评论
38
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇沸点
福建网龙计算机网络信息技术有限公司
诚聘：高级网页编辑（11K-12K）
工作地点：福建省福州市晋安区塔头路真望大厦
岗位职责：
负责公司PC/移动端站点的制作，响应式站点的制作；页面的动效制作、功能实现等；
任职要求：
1、专业不限，本科或以上学历；
2、热爱游戏或教育行业，熟悉网龙公司旗下任意一款产品；
3、精通HTML5+CSS3技术，熟悉W3C网页标准，熟悉JavaScript，熟悉jquery/ Zepto等框架；
4、熟悉Canvas，能够使用Canvas实现一些复杂效果；
5、对动效制作能够有一定的研究，了解WebGl;
6、有解决问题、钻研新技术的兴趣和能力，对业内新技术及趋势有较强的敏感度；
7、具有高度的责任感，良好的沟通协调能力，团队合作意识高。
诚聘：高级网页编辑（11K-12K）
工作地点：福建省福州市晋安区塔头路真望大厦
岗位职责：
负责公司PC/移动端站点的制作，响应式站点的制作；页面的动效制作、功能实现等；
任职要求：
1、专业不限，本科或以上学历；
2、热爱游戏或教育行业，熟悉网龙公司旗下任意一款产品；
3、精通HTML5+CSS3技术，熟悉W3C网页标准，熟悉JavaScript，熟悉jquery/ Zepto等框架；
4、熟悉Canvas，能够使用Canvas实现一些复杂效果；
5、对动效制作能够有一定的研究，了解WebGl;
6、有解决问题、钻研新技术的兴趣和能力，对业内新技术及趋势有较强的敏感度；
7、具有高度的责任感，良好的沟通协调能力，团队合作意识高。
展开
36
4
【阴阳】加载动画 #svg
几天前想到这个点子，于是就尝试着用svg实现了下。动画本身并不复杂，难的地方在于怎么样把这个动画做成响应式的同时保证八卦图的长宽比不变。挣扎一段时间后发现借助svg的preserveAspectRatio="xMidYMid slice"可以实现这个效果: 左右两扇门的实际大小比viewport要大，随着窗口的缩小只居中显示一部分svg。
(preserveAspectRatio="xMidYMid slice"的效果有点像background-position: center center + background-size: cover)
几天前想到这个点子，于是就尝试着用svg实现了下。动画本身并不复杂，难的地方在于怎么样把这个动画做成响应式的同时保证八卦图的长宽比不变。挣扎一段时间后发现借助svg的preserveAspectRatio="xMidYMid slice"可以实现这个效果: 左右两扇门的实际大小比viewport要大，随着窗口的缩小只居中显示一部分svg。
(preserveAspectRatio="xMidYMid slice"的效果有点像background-position: center center + background-size: cover)
展开
3
44
火烈鸟 #JavaScript #ZDog
最近Codepen上ZDog这个库好热闹啊，像我这么喜欢赶热闹的人怎么可能错过哈哈哈，然后我就用ZDog写了一只呆萌的火烈鸟。
Demo+源码：codepen.io
ZDog是什么？ZDog作者自己是这么说的：ZDog是一个基于JavaScript的伪3D引擎。其实原理还是在canvas或svg上作画。为什么说是伪3D呢，因为ZDog的3D效果主要是通过path的stroke实现的(想象一下你有一根一维的线，但是由于那根线很粗很粗，看起来就像是三维的了，哈哈哈，真的是奇葩)。但也正是因为这样，ZDog特别容易上手，想写一些简单的3D特效但是有没有时间学threejs的同学，去看看ZDog或许是个不错的选择哦！
最近Codepen上ZDog这个库好热闹啊，像我这么喜欢赶热闹的人怎么可能错过哈哈哈，然后我就用ZDog写了一只呆萌的火烈鸟。
Demo+源码：
codepen.ioZDog是什么？ZDog作者自己是这么说的：ZDog是一个基于JavaScript的伪3D引擎。其实原理还是在canvas或svg上作画。为什么说是伪3D呢，因为ZDog的3D效果主要是通过path的stroke实现的(想象一下你有一根一维的线，但是由于那根线很粗很粗，看起来就像是三维的了，哈哈哈，真的是奇葩)。但也正是因为这样，ZDog特别容易上手，想写一些简单的3D特效但是有没有时间学threejs的同学，去看看ZDog或许是个不错的选择哦！
展开
4
21
#视差滚动特效
(据不可靠推测) 视差滚动特效第一次出现在2014年，如今我们在很多网站上都可以看到它的身影。它的原理是通过前景与背景移动速度的差别，营造出一种奇妙的视觉体验。视差滚动一般分为两种：一种是前景和背景都动，但是前景比背景动得快（见图1）；还有一种是只有前景动，背景不动（见图2）。
第一种（图1）既可以通过js实现，也可以通过css 3d transform实现。js实现的兼容性比较好，css实现的性能比较好。
第二种（图2）主要通过background-attachment: fixed实现，比较简单。
图1的Demo+源码：codepen.io
图2的Demo+源码：codepen.io
扩展阅读：
keithclark.co.uk
pixelcog.github.io
(据不可靠推测) 视差滚动特效第一次出现在2014年，如今我们在很多网站上都可以看到它的身影。它的原理是通过前景与背景移动速度的差别，营造出一种奇妙的视觉体验。视差滚动一般分为两种：一种是前景和背景都动，但是前景比背景动得快（见图1）；还有一种是只有前景动，背景不动（见图2）。
第一种（图1）既可以通过js实现，也可以通过css 3d transform实现。js实现的兼容性比较好，css实现的性能比较好。
第二种（图2）主要通过background-attachment: fixed实现，比较简单。
图1的Demo+源码：
codepen.io图2的Demo+源码：
codepen.io扩展阅读：
keithclark.co.ukpixelcog.github.io
展开
评论
49