老照片，在你的生活里扮演着什么样的角色？放在了一本本厚厚的相册里？还是裱了起来？ 别人家的老照片会动呢！羡慕吗！这位法国摄影师兼动画师 Nicolas Monterrat 长期在网上公布一些艺术作品，将静态的老照片加上动效，变成像拼贴画一般“活起来”的艺术作品。这些动画照片融合了报刊或杂志里的一些抽象素材，给老照片增添了许多不一样的气氛。 你别说，我都不想知道它本来照片的内容是什么了！更想沉浸在它“改造”后的照片里了。这脑洞也不是一般的大，各种老照片在他手里变得充满活力的同时略带一点恐怖…
初学SVG的时候，感觉那一坨一坨的代码难读难懂，现在回过头仔细想想，是因为那时候看文档缺少一些具体的实例，导致学习起来很枯燥。如今SVG已经在前端各个领域都有所作为，无论是项目里的应用还是demo都所处可见，这里我就用一个实例的写法带新同学轻松的打开SVG动画的大门。 首先我们定义一块画布，然后在上面画一个圆形。 他看起来应该是这个样子的：（每一个实例我都会附加图片以及demo链接，方便直观的理解与源代码的查看，查看的时候请使用标准浏览器） 点击查看Demo 现在我们就让这个圆动起来 动起来是这个样子的（gif循环…
让我们先谈谈什么是动画,然后再讲如何能成功地用于网页设计。 首先,你应该知道,动画是图像按照序列高速切换的运动错觉效果, 这种效果是一种光学运动的产生的视觉暂留现象。最常见的就是电影和视频。 如今,动画是网页设计的重要组成部分, 有助于改善用户和网站的交互体验。 设计师虽然可以尽可能多的使用动画效果 ,但他们必须牢记,一个站点没有任何动效可能会显得无聊,但是过多的使用也会变的杂乱无章。如果网页设计师希望能够熟练地使用动效,我们应该把握好度。 下面是40个非常绚丽动画的网站，各种不同形式的交互动画，让我们知道哪一个是…
最近发现很多做设计的朋友不会用ps的动画功能，Adobe在ps CS4系列的时候就已经吧动画功能集合在ps中，cs6以后的版本中又改成时间轴功能； 而且编者发现很多朋友会用帧动画做gif，但是不会用时间轴，今天，给大家写个小教程，用时间轴做个简单的小动画。 先上效果图 这里使用PS CC演示 一、首先打开PS，并在窗口菜单中选中时间轴，打开 二、创建300*500竖构图画布，分辨率72ppi，底色白色 三、在画板顶部中心位置，使用形状工具新建一个圆，填充色（#9977cc,颜色随便写） …
失败的网页设计各不相同，但是优秀的网页设计则有着共通的特点。你需要思考人们想要的是什么，什么东西能够触动他们，让他们欲罢不能，无法忘怀。 听起来似乎很简单，不是吗？取悦用户的关键在于像用户一样思考。并不是每一次创新、每一次重塑、每一种新技术都能让用户愉悦，那些真正易于理解、便于使用、降低难度的技术、设计手法和抓人的视觉元素，才是一切的关键。下面总结的7项秘诀，会让你的网页脱颖而出的。 1、定制化 定制化，或者说个性化，是今天网页设计中最典型的趋势之一。用户希望浏览网页的时候获得更加私人的浏览体验，无论是玩页游还是购…
原文来自：http://www.cnblogs.com/jr1993/p/4677921.html 主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画，想不会都难！那么，到底是什么东东呢？先不急，之前我分享了一个css实现进度条效果的博客《CSS实现进度条和订单进度条》，但是呢，那篇博客只是制作出来效果而已，并没有动画效果，因为当时正期末复习期间，所以就省了制作动画的时间成本。所以，今天就一起把各种效果都实现吧！ 内 容 先看一下效果图，会提升我们的学习兴趣哟： 好的，我将按照此图从上到下的顺序讲解，由于第一…
在浏览网页、玩游戏、手机应用等场景，因为网速慢或是硬件差的关系，难免会遇上等待加载的情 况，没人喜欢等待，耐心差的用户可能因为操作得不到及时反馈，直接选择放弃。正所谓细节决定成败，这时添加一个Loading进度条动画，就可以大大缓解 等待时候的无聊和焦虑，有效让用户明确知道目前Loading的状态，并对结果有一个直观的预期，甚至有趣巧妙的设计，能让用户爱上等待，把等待看成一件 很美好的事。 那常见的Loading动效有哪些形式呢？在观摩过大量优秀的案例后，作者总结出Loading动效通常有B.R.A三种形式。为避免…
