初学SVG的时候，感觉那一坨一坨的代码难读难懂，现在回过头仔细想想，是因为那时候看文档缺少一些具体的实例，导致学习起来很枯燥。如今SVG已经在前端各个领域都有所作为，无论是项目里的应用还是demo都所处可见，这里我就用一个实例的写法带新同学轻松的打开SVG动画的大门。 首先我们定义一块画布，然后在上面画一个圆形。 他看起来应该是这个样子的：（每一个实例我都会附加图片以及demo链接，方便直观的理解与源代码的查看，查看的时候请使用标准浏览器） 点击查看Demo 现在我们就让这个圆动起来 动起来是这个样子的（gif循环…
咖啡 这个免费的HTML模板主要适用于触屏移动。汉堡菜单，大而明显,适应各种设备。最适合咖啡馆、餐馆以及画廊网站。 演示 | 下载 Build-Up 适合金融和投资网站。 简练干净。 演示 | 下载 Eventrum 这个模板明亮、欢快。主要适合节日气氛；大胆视觉效果、手写字体以及大量留白布局,使文本更具可读性。 演示 | 下载 BLISS 结合软,柔和的颜色设计，视觉效果很棒。 基于网格化设计，可以在页面上呈现大量的数据。 演示 | 下载 Sonja Rode 这是一个现成的HTML5的，适合摄影师和摄像师组合网…
在网站的欢迎页面加入HTML5视频越来越受欢迎,因为它们可以创造一个有趣的视界环境，来吸引游客的注意力。 如果使用得当,视频可以通过讲述一个故事让游客更好地了解网站从而建立忠诚度。 还可以建立一个好的氛围,从而取代单调静态的背景图像。 由于HTML5支持各种新的多媒体，你可以分享高质量、大尺寸的视频娱乐来激励观众。 Art, Copy & Code ONY Agency Made by Hangar Lois Jeans Spring Summer 2013 Irak: 10 ans, 100 regard…
偶然在网上看到这些不错的jQuery代码开发技巧。原文收集了30个，另外查找的时候发现了还有20个。加上另外十个实用的jQuery代码片段，共60个代码技巧，收集在一起分享给大家。 这些jQuery代码实用性比较强，有些忘了的地方可以现学现用。现在暂时没有用到以后应该会用到，觉得不错可以收藏一下。当然，觉得还不过瘾的可以去看看： 1. 创建一个嵌套的过滤器 .filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素 2. 重用你的元素查询 var all…
CSS3动画属性并不是很多，但重点其实是你怎样去运用它，从简单的hover状态或复杂的小动画，都可以巧妙的用CSS3动画属性来实现。 今天主要是和大家分享一个比较有创意、实用的CSS天气图标动画，静态的天气图标看上去是很呆板，若加上动画，看起来会更加真实生动，以下例子就是很好的参考案例。 下面我们来做一个会下雨的天气图标实例，过程其实很简单哦。 STEP1: 整体HTML架构 <div class="icon rainy"> <div class="cloud"></div> &…
jQuery 允许用户为任意 DOM 元素添加可拖放的功能，通过 jQuery 的拖放插件你可以轻松实现网页上任意元素的拖拽操作。在本文中我们向你推荐 30 个最棒的 jQuery 的拖放插件。 点击图片访问插件网站： 1. Dropper Dropper is a jQuery plugin for simple drag and drop uploads. 2. Fancy Product Designer 3. Dragdealer 4. jQuery Ajax File Uploader 5. jDashb…
快速发展的技术、千变万化的趋势、应接不暇的软件和素材，都是网页设计师需要面临的挑战。但是撇开这些一直变化的东西，有一些基本的技能或者说能力，是设计师必须熟练掌握的，甚至需要网页设计师们闭着眼睛都能搞定相关的问题。那么，今天我们简单盘点一下网页设计师必须具备的十大基础技能吧。 1、熟练掌握HTML/CSS代码 不论你是不是开发者，网页开发最基本的语言HTML/CSS 你是有必要掌握的，知道如何阅读、编辑并解决问题。然而根据设计师/开发者的实际工作情况，你所需要了解的程度、范畴甚至会更广一些。 在任何情况下，你都应该清…
在寻找一些网页设计灵感吗?那你来对地方了! 这准备了一些网页设计的实例，26个时尚新颖的网页设计，简单新颖的着陆页、时尚的电商网页、服务全面的企事业宣传页面。 点击查看页面链接 Hurley Phantom Elite by Pedro Julien 点击查看页面链接 Our Brand is Crisis by Watson 点击查看页面链接 BeoPlay H3 by Søren Smidt 点击查看页面链接 Epicurrence No.2 by Dann Petty 点击查看页面链接 GoPro Redes…
之前分享了 【前端动效】一大波css按钮动效袭来 【前端动效】一大波css按钮动效袭来(之二) Cryptaris Glitch CSS Button HTML (Jade) + CSS (SCSS) Glitch button hover used on http://cryptarismission.com http://codepen.io/positlabs/pen/xwMpez Animated SVG Hover Buttons HTML + CSS A lot of people li…
1. Kenshoo 2. Desktime 3. SWISS airlines 4.Inside Abbey Road 5. Beagle 6. Khan Academy 7. Impossible Bureau 8. Periscope 9. Ice and Sky’s educational program. 10. Toptal Designers 11. Litmus 12. Mikiya Kobayashi 13. ETQ 14. JOHO’s 15. Unmetric 16. Format …
听人聊到全栈设计师的 时候，这看起来像一个华而不实的概念诞生了。乍一看这个高大上的概念似乎在说一个意思：全能型设计师。在过去，我们曾推崇“专业的事情让专业的人来做”， 而团队关系中，设计师的职责就是认认真真做设计，程序员踏踏实实写代码，各司其职，合作但尽量不相互干涉。然而随着产品设计思路的变化，团队的协作方式的 演进，团队中每个角色的职责范畴开始发生改变。这种改变的原因是多方面的，这个看起来很“忽悠”的概念，如果真的深究起来，却是真的有其不得不这样的原 因。 什么是全栈设计师 相比全栈设计师（Full Stack …
单页网站的定义非常明确,大概意思是:一个单页面组成的网站,一个页面URL。 这是一个滚动式的页面设计,不需要点击跳转的。 我们喜欢网络的第一要素是因为它是不断进化的。 年复一年,新工具和设计方案不断地出现,旧形式的淡出。 Flash在1996年崛起,现在呢?如今仍然在流行的和使用吗? 拖放界面在2008年成为普遍,但它还是被认为有前途的。 单页设计，作为一个热门趋势，尽管这不是主流趋势,但作为新的设计风格,越来越多的设计师注意并且使用。 《Things you did not know about addictio…
意是无处不在的，在网页设计中，若发现一些好的灵感或趋势，就尽量去尝试应用到你的项目上，把哪些枯燥的、已经烂大街的创意能少用就少用了，毕竟设计师也是要提升自我，不要为了快速完成工作就随意了事。 今天为大家整理的网页设计创意有图像遮罩、混合模式、交错排版，这些在网页设计中不常用，看起来却挺有创意的版式创作，在实际操作中难度也不高，Web设计师们都可以试试，下面一起看看这些网页设计灵感，喜欢的可以试着做哦！ 图像遮罩（Image Mask） 会PS的人都懂图像遮罩怎么使用了吧？看看下面的例子，其它可以这么玩的哦，简单美观…
今天给大家分享一组来自dribbble的APP界面动效设计，希望大家在这能找到一些灵感。涵盖运动、旅行、天气等等。 Abracadabra App Secret Project COVERT INBOX City intro animation GIF Animation of an App Map-Interaction Sport App Coffee Maker App GIF Sticker App Tab Bar Animation
循环（Loop）是现代浏览器中HTML5视频标签下的布尔属性，包括IE9在内的主流浏览器都支持这一属性。它能让一个或者一系列视频短片循环播放。开发者社区中，网页设计师非常青睐这一功能，并且截至目前影响了许多项目，让网站看起来更加绚丽和精彩。 从作品展示类的网站到移动端的专题页，循环视频背景的运用范畴非常广泛。网页开发者们将5~10的视频作为背景循环播放，而视频内容通常会展现出某个主题，或者有目的性地展现达成某个目标的过程，呈现企业或者团队的潜在实力。这种展现方式比起传统的网页设计手法，更能挑起用户的兴趣，引人注意，…
在今天新网站设计中，很多网页设计师对于登录表单设计并不是太关注，一些网站还是希望提供一个从上到下完全定制的、个性化的体验! 下面这20个网站有一些表单的设计有趣的例子 ! 这更像一个表单展示设计从过去到现在的历史时间轴! 这些设计有很多不同的风格，每个都有自己独一无二的方式。 CodeQuest Contact form Eddie-Lobanovskiy Indofolio Cabedge Soap Box Simple contact form Surfuzz – Sign Up Page Tem…
在设计中，一般来说极简主义是美丽的。 干净清晰的线条、微妙的影响、漂亮的色调，所有这些都是极其重要的。 极简主义再设计中使用比较广泛，尤其是网页设计。 企业网站、在线商店已经开始采用这一趋势。一般这些网站都有出色的图片摄影和很好的用户体验布局。 以下这些极简网站属于不同类型，然后每个都有自己的特殊性，我们相信大家会喜欢。 在这里你会发现各种网站的设计组合，在线商店、企业官网、在线商店等。点击标题查看链接 Disajn.pl – personal portfolio Tsovet – American Design …
