»CSS3和jQuery动态时钟制作过程
本文译自OldSchoolClockwithCSS3andjQuery，主要讲述了如何利用CSS3和jQuery制作一个漂亮的动态时钟。 Hi，大家好，我叫TobyPitman，Chris曾邀请我写一篇关于最近我在论坛上发的一些实验成果，于是当我在WebKitblog和sawanarticle上看一些新的CSS3动画时，有一个rotate属性深深地吸引了我的眼球，于是就开始着手写这篇文章了。我当...
»使用CSS3让文字按指定路径显示
之前，我们利用CSS只能让文字横平竖直地显示，连倾斜一个角度都不行，更不用说让一串文字按指定的路径轨迹显示了。但是，CSS3到来之后，这一切实现起来是那么的简单，我们可以利用CSS3的text-transformoptions:rotation,skew,matrix,transform-origin等属性来实现对文字的显示路径。下面是一个示例，支持CSS3的浏览器才能看出效果 #warped{...
»纯CSS3制作的Windows 7开始菜单
我对使用少量CSS3代码来实现很多效果这一过程非常的着迷，很多UI元素都需要用图片来展示其漂亮的外观，但是你可能不知道，单纯的CSS3代码也是可以实现的。下面我就用纯CSS3来制作Windows7开始菜单（额外需要几个小图标），从而来证明这个观点。 如果我们分解这个Windows7开始菜单，我们会得到1个div，2个ul列表，1组链接以及一些icon小图标，我们可以一起来看看具体的效果。下面是简...
»用css3制作Loading动画的几种方法
以WebKit为核心的浏览器，例如Safari和Chrome，对html5有着很好的支持，在移动平台中这两个浏览器对应的就是IOS和 Android。最近在开发一个移动平台的web app，那么就有机会利用css3去实现一些很酷的效果，这些效果原来更多的是利用图片来实现。最近的一个改进就是利用css3制作旋转加载动画。以下将 分别介绍几种实现的方案。 方案1，图片辅助 传统做法是直接用动态的GIF...
»CSS3中动画效果的应用
不少人都已经在用CSS3中的动画了，但很多仅仅用在某个元素的hover上。其实，配合脚本的话，可以做到更多的动画效果，并且可以在很大程度上抛弃各种动画库。 先前一博客《用HTML5代替PPT》中，我的各种动画效果就完全使用了CSS3的动画效果而不再使用jQuery的动画了。 点击查看展示 设置CSS *{ -webkit-transition-duration:.15s; -moz-transi...
»CSS3 Transition属性的浏览器兼容测试
在《CSS3的Transition属性》一文中，我们具体讲解了关于CSS3的Transition属性的属性值及其用法，今天我们再来学习一下关于CSS3的Transition属性在各个浏览器的兼容情况。 由于CSS3在国内还不是很流行，所以国内的大部分浏览基本上都不支持CSS3，而且短时间内也没有大面积支持的势头；虽然CSS3在国际上的盛行 度很大，各大浏览器厂商也正在努力的更新他们的浏览器，以求跟...
»CSS3中的Transition属性详解
W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。” 下面我们从最简单的语法和属性值开始一步一步来学习transition的具体使用： 语法： transition：[<'transition-prope...
»3款漂亮的CSS3 Loading动画实例教程
本文译自CSS3LoadingAnimation，由HTML5中文网站提供翻译，转载请注明出处。 Hello，亲们，这次让我来带着大家去创建3个非常漂亮的CSS3Loading动画吧。我没记错的话这个CSS3Loading动画只能运行在firefox、chrome和safari浏览器上，你还在等什么，赶紧往下看吧！ VIEWDEMO 第1个CSS3Loading动画例子 HTML 第1个例子...
»浅谈CSS3 Filter的10种特效
必须要说明的是，这里的CSS3Filter与我们所熟悉的CSSFilter是完全不同的两个概念，也不是我们所熟悉的IE滤镜，它是指通过CSS或SVG渲染元素概念可以描述的元素，包括它的子元素。 关于CSS3Filter的具体解释您可以参考《FilterEffects1.0》这篇文章。 接下来我们就开始探讨如何使用CSS3Filter实现我们想要的效果。 首先，我们介绍一下Filters的使用：Fi...
»CSS3按钮导航Dark Navigation Buttons
前面向大家介绍了一款超级友爱的CSS3按钮和一款光彩四射的CSS3按钮，今天继续给大家带来一款非常漂亮的CSS3按钮叫DarkNavigationButtons，不仅是按钮，同时你也可以用它来作导航，同样非常出色。先看看这款CSS3按钮的效果图吧： 在线示例 | 源码下载 其CSS代码如下： /*DarkButtonCSS*/ ...
»分享一组超级友爱的CSS3按钮
上一次分享的是光彩夺目的发光按钮，今天咱们换换口味，一起来看一组很萌很有爱的CSS3按钮。效果图如下 这些CSS3按钮上的小图标是利用HTML5中的data-icon属性实现的，如： <ahref="#"class="button">Button</a> <ahref="#"data-icon="?"class="buttonorangeshieldglossy"&...
»分享一款光彩四射的CSS3按钮集合
开篇引言 CSS3文字特效的分享就暂时告一段落，主要收集了5款具有代表性的CSS3文字特效，收藏在盘点5个典型的CSS3文字特效这篇文章中，有兴趣的朋友可以去看看。接下来我的打算是从今天开始分享一些CSS3相关的按钮和导航，大部分素材应该都来自一些老外的设计，希望接下来的几篇文章对你会有所帮助，当然你的支持和点评也是我坚持做下去的动力。 正文 今天的这款CSS3按钮应该说是非常的光彩夺目，因为不仅...
»盘点5个典型的CSS3文字特效
近两年，HTML5和CSS3似乎正在掀起一场互联网的革命，各种人才纷纷涌向了这波浪潮，各种HTML5创新应用也如雨后春笋般冒了出来。的确，这应该是未来WEB的趋势了。这两天我也在学习HTML5和CSS3方面的知识，同时总结了几个典型的CSS3的文字特效，放在自己的博客“HTML5中文网站”上。网上CSS3文字特效的例子非常多，但这几个特效应该说都很具有代表性的，其他的也基本都是基于这5个扩展开来的...
»CSS3内阴影（Inset）效果的文字
我们可以用text-shadow属性来模拟文字的Inset效果，但这样做却不是真正的Inset，这里我主要是用CSS3的background-clip属性来完成这个Inset效果。 CSS3中的background-clip属性，其主要是用来确定背景的裁剪区域，换句话说，就是如何控制元素背景显示区域。其语法如下： background-clip：border-box||padding-box||...
»让CSS3给你的文字加上边框宽度，并实现镂空效果
前两天我向大家介绍了一些有关CSS3的文字特效，包括利用text-shadow属性制作3D文字，利用text-shadow和jquery动态渲染制作燃烧文字动画，利用transition属性制作了颜色过渡渐变效果。这次，我主要向大家介绍一下CSS3下的-webkit-text-stroke属性，并分享几个用该属性制作的镂空文字效果。 1、-webkit-text-stroke属性简介 CSS边框的...