文章关键字 ‘animate’

记一次技术交流,feMerge滤镜复制任意DOM元素样式

2024年05月30日,星期四

封面图

没想到吧,借助SVG看似不起眼的feMerge滤镜,我们可以轻松实现任意DOM元素的样式的投影复制效果,还支持动画哦。

阅读全文…

CSS3动画那么强,requestAnimationFrame还有毛线用?

2013年09月30日,星期一

requestAnimationFrame与动画
本文可谓JS实现动画必读文章。设计实现、性能、动画算法,CSS3相关等一系列内容。配以生动的对话体,二次元与三次元的碰撞;丰富的demo、截图以及源代码展示,平白易懂的文字,相信本文的内容一定能够对您的学习有所帮助!

阅读全文…

web上渐进使用jQuery Mobile中animate相关CSS

2012年11月2日,星期五


animate虽然是CSS3中随时比较高级的东西,看上去与实际的web项目不搭噶,但是,这里,我要告诉你,在实际web项目中也是可以渐进使用CSS3 animation相关动画的,而且,操作难度以及兼容性处理都是很低的哦!

本文以比较实用的jQuery Mobile框架中开源的animate相关CSS代码为实例,分别展示了其中各种animate效果在实际交互中的应用。大量demo,大量截图以及源代码示意。相信本文的内容会对您的学习有所帮助的!

阅读全文…

好吧,CSS3 3D transform变换,不过如此!

2012年09月7日,星期五

轻松驾驭CSS3 3D transform变换
CSS3 3D transform变换对于没有接触过的人而言可能会是件很头疼的事情。首先涉及到N多CSS方法以及CSS函数,如何理解他们头疼;其次,3D效果的实现,需要一定的空间想象能力,但是,不少人的脑袋是会想妹子想男人,怎么办?再者,3D效果的实现还离不开各种角度方位的数学计算,要是勾起了某些人学生时代的数学梦魇,又可如何是好!

相当不少人有这样的境遇,加上自己最近也在学习CSS3 3D transform变换的相关东西。好吧,整理一下,用通俗易懂的方式表达下我对CSS3 3D transform变换的一些理解;分享知识同时,自己也整理和提高了。一举两得,何乐不为。

本文是难得的长篇,很多精心挑选制作的配图,N多帮助理解制作用心的的demo页面,还有必要的源代码展示等。希望本文的内容可以让您学习CSS3 3D transform变换的相关知识更加的轻松!

阅读全文…

CSS3无前缀脚本prefixfree.js及Animatable介绍

2011年11月15日,星期二

虽然现代浏览器支持CSS3,但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的。像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS3属性,例如渐变,oh,my GEE GEE,前缀少不了,于是每次应用都像是建大楼一样。比楼高是很傻逼的一件事情,所以如此霸气侧漏的CSS大楼反而让人伤不起,我们总希望跟这些前缀说“顾德白”。有此想法的前端er们想必大有人在,于是,一些牛逼且执着于web技术且乐于分享的仁兄就搞了个名叫prefixfree.js的东西……然后又弄了个Animatable的东西……

阅读全文…

小卖弄:纯CSS实现图片滚动播放效果

2011年09月21日,星期三

网站的首页经常或有广告位图片滚动展示的效果,主流网站上都是使用Javascript实现的。实际上,在CSS3的世界里,我们可以完全摒弃Javascript实现类似的效果。而本文的内容就是展示于简单介绍如果使用CSS3实现图片滚动动画展示效果。提供demo页面,必要截图和源代码展示,希望能对您的学习有所帮助。

阅读全文…

CSS3 Transitions, Transforms和Animation使用简介与应用展示

2010年11月25日,星期四


本文介绍CSS3动画相关的几个属性是:transition, transform, animation,分别理解为过渡,变换,动画。虽然目前很多浏览器还没有完全支持这些属性,但是,在渐进增强的原则下,其高效的动画实现方式还是有很实际的应用价值的。本文实例当先(共14个),依次展示transition属性,transform属性,animation属性,而后三者结合展示一些更实际的效果与应用。
本文demo页面非常详细,提高必要的源代码展示,和截图供参考。希望能对您的学习有所帮助。

阅读全文…

翻译 – CSS高峰会议内容精选

2010年09月26日,星期日

昨天的CSS峰会上一些优秀的人才就CSS一些尖端的问题发表了他们的看法。有大量的非常有用的信息,总共有8部分的内容,有Denise Jacobs – CSS高级故障排除;Chris Eppstein – 使用Sass和Compass创作样式;Jason Cranford Teague – 2010网页字体年;Zoe Gillenwater – CSS3下的有效&有效率的设计;Estelle Weyl – CSS3 & iPhone;Stephanie Rewis – CSS3 & 渐进增强;David McFarland – CSS3 Animations;Nicole Sullivan – CSS肿胀!
虽都不是什么惊世之作,但是,对于帮助我们开阔视野,增加一个技术知识还是很有帮助的。能力有限,难免会有翻译不准确,或是表述不恰当的地方,欢迎指正。

阅读全文…

关于锚点跳转及jQuery下相关操作与插件

2010年07月15日,星期四

本文主要是讲述有关页面锚点的一些知识,以及IE浏览器下锚点的一些问题及修复。最后,提供了自己写的一个很小的任意标签锚点跳转的小jQuery插件,并对此插件的使用进行的简单的介绍。

本文提供丰富的截图,提供必要的demo,以及源代码展示,提供相关的源文件下载。希望能对您的学习有所帮助。

阅读全文…

CSS3 text-fill-color简介及应用展示

2010年06月26日,星期六

本文内容并不多,主要就是简单介绍下CSS3的text-fill-color属性,并举例展示其应用。展示,如果利用CSS3的text-fill-color属性实现效果精湛的文字遮罩渐变动画效果。提供必要的截图,代码展示,以及视频动画消失。希望能对您的学习有所帮助。

阅读全文…