CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果。你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果。   今天这篇文章为大家挑选了15个超炫的 CSS 动画效果的例子,这些 Demo 可以说都是艺术品。(为保证最佳的效果,请在 Chrome、Firefox 和 Safari 等现代浏览器中浏览) 1. JavaScript Mickey Watch Apple watch like Mickey watch …

2015年05月27日 0条评论 2923点热度 0人点赞 阅读全文

我们将向大家展示下网页动画的现状地图,并收集了一些具有多变表现力的类库、框架和插件。   图1:网络动画地图 下图分为三个区域,第一部分是一些容易理解的动画类库,撇开已经达到期望的通用动画方法外,还从简单的方法和函数到时间控制都提供了大家所希望的工具。我 们从JavaScript类库中分离了用CSS3过渡的动画元素,也挑选出了能够和SVG,WebGL或者HTML5 Canvas相连接的动画类库。     图2:工具列表 第二部分是专为文档模型中像滚动动画,视差,CSS sprite,3…

2015年05月26日 0条评论 5500点热度 1人点赞 阅读全文

对于网页设计师和平面设计师来说,图片素材是十分重要的,特别是无版权限制的素材。虽然国内有很多素材下载站,但是大部分都没有版权描述,这样会让用户不知道是否可以免费使用这些素材。 今天为大家整理目前优秀的提供免费图片素材资源网站,这些网站的图片质量相当高,大部分为高分辨率(高解析),并且,最重要的是,它是免费的,无版权限制哦!同时具备免费、高清(无码)、无限制这三大因素的图片资源站绝壁是干货中的干货! Gratisography gratisography里面的图片每周都会更新,很多时尚流行的照片在里面,并且适合用在设…

2015年05月23日 0条评论 3943点热度 0人点赞 阅读全文

网站的快速发展,网页设计方面的作用功不可没,如果你是一名网站的设计师,不要浪费时间在那些无用的网站上。这里有众多灵感创意类网站启发你的创意 和新想法。引人注目的网站设计在一个在线销售与营销网站中扮演着重要的角色。今天的一周灵感酷站推荐,我们收集了一些色彩丰富的漂亮网站,你能够从中学到 很多。 01. Door Tokyo 02. Diagnosite 03. Air France 04. Tannbach Modul 05. Jsconfar 06. BMW 07. Paranormal Dragitivity 0…

2015年05月18日 0条评论 2901点热度 0人点赞 阅读全文

是时候为网页设计师的来一组便捷的辅助工具了。日新月异的网页技术革新催生了大量的设计与开发工具,HTML5/CSS3几乎成了设网页设计师的必修课,而强大的JS也为网页提供了更多的可能性。尤其是HTML5,作为一门极为有用且实用的标记语言,它赋予网页设计师创造更优秀网页的可能。 这也是为什么,身为网页设计师的你需要不停地了解最新的技术趋势和新兴工具,这些全新的库、框架、插件和技术能让你的网页如虎添翼。 HTML5使得设计师和开发者在各个不同领域都比之前更强大了。快速,漂亮,安全,响应式,这些特性使使得设计师和开发者可以…

2015年05月09日 0条评论 3054点热度 0人点赞 阅读全文

随着近些年CSS与CSS3的发展,有些东西我们可以纯用CSS去实现,取代那些需要使用背景图片的老技术。在这篇教程中,我们将创建扁平化的面包屑导航链接,不再需要使用之前流行的“推拉门式的背景图片”。   我们将面包屑链接设计成类似雪佛龙的样式,表达向下获取内容的意思。过去我们用背景图片实现这一效果,现在我们将在边框border属性的帮助下,纯用CSS实现相同的效果。 第一步 1 2 3 4 5 <div id="crumbs"> <ul> <li><a href="…

2015年05月09日 0条评论 2623点热度 0人点赞 阅读全文

承接上文《玩转HTML5移动页面(动效篇)》,上次说的是让页面动起来的一些小技巧。 而页面动起来的根基是功能可用的页面,因此有必要分享一些优化细节的技巧和方向,熟悉掌握一些方法论还是会对页面开发大大提高效率的,并且也能防止疏忽缺漏。 ====前方高能==== (1) 动画雪碧图 涉及的动画十分多,用的元素也十分多,请务必使用雪碧图(Sprite)! 网上的工具有一些可以帮助你生成雪碧图的工具,例如CssGaga,GoPng等等,自动化构建工具Grunt和Gulp也提供了相应插件。 特别地,如果单张雪碧图面积实在太大…

2015年05月07日 0条评论 1863点热度 0人点赞 阅读全文

众所周知,当初微软在Windows 8上做了非常大胆的变革,除了开创性的Metro设 计语言,传统桌面和平板两种模式的融合也是一大特色,可这两种操作模式在使用体验上的不一致也成为Windows 8饱受用户诟病的原因之一,但微软自始至终都朝着平台大融合的目标坚定前行着。经过一路探索,微软终于通过在Windows 10系统的公布,展示了一个更加清晰明了的战略方向:构建一个面向全部Windows设备的核心操作系统。 一、系统新特性 首先,我们先来了解几点与应用设计相关的一些系统特性: 通用应用(Windows Apps)…

2015年05月06日 0条评论 1961点热度 0人点赞 阅读全文

在浏览网页、玩游戏、手机应用等场景,因为网速慢或是硬件差的关系,难免会遇上等待加载的情 况,没人喜欢等待,耐心差的用户可能因为操作得不到及时反馈,直接选择放弃。正所谓细节决定成败,这时添加一个Loading进度条动画,就可以大大缓解 等待时候的无聊和焦虑,有效让用户明确知道目前Loading的状态,并对结果有一个直观的预期,甚至有趣巧妙的设计,能让用户爱上等待,把等待看成一件 很美好的事。 那常见的Loading动效有哪些形式呢?在观摩过大量优秀的案例后,作者总结出Loading动效通常有B.R.A三种形式。为避免…

2015年05月06日 0条评论 2647点热度 0人点赞 阅读全文

四月份最有技术含量的干货!今天腾讯前端TQ同学来来谈谈一些动画设计的小技巧,能帮你在短时间没动画灵感时瞬间让页面增色,同时也会谈及移动端H5页面的优化细节与关键点 >>> 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就来谈谈一些动画设计的小技巧,能在你时间不多又没有动画想法的时候瞬间让页面增色不少。 同时也会谈及移动端H5页面的优化细节与关键点,…

2015年05月05日 0条评论 2487点热度 0人点赞 阅读全文