大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。本周极客社区推荐9款使用CSS3实现的超酷前端动画效果。希望对大家有所帮助!
让我们晃动起来 - CSS小脚本工具:CSS Shake
本地演示
UI或者网站设计中,或许在某些情况下你希望你的用户能够关注某一个区域或者某一个界面元素,过去大家常用的方式是使用一个GIF图片,或者土一点儿方法生成一个高亮的区域,但随着浏览器的发展及其CSS动画的实现,我们可以借助一点点代码来生成。
在今天这篇小文章中,我们将介绍一个小巧的CSS脚本工具 - CSS Shake,它能够帮助你快速高效的生成一个“晃动”效果,你可以通过它来添加一个晃动效果到你的页面元素中。
CSS实现的电路板效果
本地演示
金属质感强烈,规则顺序的电路板排序应该是可以非常之广泛使用的,它看起来更像是分子结构。点击下方连接,可以查看到源代码。
CSS3的Hover效果类库 - Hover.css
本地演示
Hover.css是由Ian Lunn开发的一个开源的CSS3悬浮效果类库,这些强大的悬浮效果可以应用到按钮,logo,图片等等上。非常容易应用到你自己的元素上,或者作为创意展示。支持CSS和SASS。
如何使用?
不同动画效果的缩略点符导航
本地演示
我们曾经介绍过很多款导航,今天这款是使用缩略标点来显示的。如果你有兴趣可以直接点击下载。
CSS3生成的加载中旋转特效
本地演示
今天介绍一套CSS3生成的加载中特效,包含了8个非常酷的效果。你只需要使用CSS3即可生成。下面是一个代码示例:
CSS3实现的超酷的图片重叠特效 - 包含多种动画效果
本地演示
非常有趣的图片叠合效果,如果你也喜欢,可以点击查看并下载!
CSS3实现的Safari Compass效果
本地演示
使用CSS3实现的Safari指南针效果,主要使用到了Keyframe生成动画!
超酷动态的CSS3加载中效果
本地演示
非常时尚的一款加载动画效果,如果你想查看编写代码,点击本地演示。
CSS3实现的矩阵动画效果
本地演示
这个动画使用CSS3的keyframe控制动画实现。
相关推荐
纯CSS3实现超酷的磁带动画是一款相当震撼逼真的CSS3磁带动画特效。
jquery+css3实现的超酷动画效果Lightbox灯箱特效.zip
这是一款4种效果非常炫酷的纯CSS3页面切换过渡动画特效。该CSS3页面过渡动画使用CSS keyframes制作而成,所有的动画效果和延时都是使用CSS属性,没有任何的javascript timeout()代码。
基于jQuery+CSS3实现超酷的动画Tab菜单效果源码.zip
很久没有向大家分享关于CSS3按钮的动画特效了,今天就给大家带来8款超酷而实用的CSS3按钮动画,由于google字体服务被屏蔽的缘故,所以你在截图上看到的字体和实际演示会有所差异。一起来看看这些CSS3按钮吧。 1、CSS...
css3打造的超酷三维动画效果的导航菜单
这是一款CSS3超酷模糊发光文字动画特效。该特效通过简单的CSS代码来实现文字的模糊和发光动画效果。
waitMe是一款jQuery和CSS3超酷loading加载动画特效插件。该loading加载动画特效使用CSS3制作了14种不同的loading动画效果,并且你还可以使用图片作为loading动画。
纯CSS3实现超酷的磁带动画特效源码.zip
今天我们要分享一款非常有创意的HTML5/CSS3动画菜单,菜单是环形的,当鼠标点击中心按钮时,子菜单即会环绕展开,并伴随很酷的...记得之前还分享过一款HTML5/CSS3实现iOS Path菜单,也是环形的菜单,动画效果也比较酷。
这是一款使用GSAP的TweenMax.js和CSS3来制作的效果炫酷的盒子爆炸动画特效。该爆炸动画在用户点击页面中的一个弹跳的盒子的时候,盒子会爆炸为烟雾,然后会出现SVG Logo,整个效果非常连贯逼真。
这次我们要用纯CSS3来实现一个超酷的磁带动画特效。首先用纯CSS3绘制了一个磁带的外观,还是相当逼真的,然后用CSS3的动画属性实现了磁带的旋转,就像在播放歌曲一样,如果配合HTML5的音频播放功能,就和那个磁带...
超酷CSS3图片3D旋转效果 超酷CSS3图片3D旋转效果 超酷CSS3图片3D旋转效果
超酷jQuery CSS3翻页时钟动画是一款数字时钟,时间每过一秒,相应的位置就会像翻日历一样翻过去。另外,这款CSS3数字时钟有点立体的效果,非常漂亮。
多款超酷动画效果的Lightbox特效 是一款Boxaroo v1.8插件,基于jquery css3实现的超酷动画效果Lightbox灯箱特效。
三款非常酷炫的网页Loading加载进度条动画效果。使用css3 animation技术制作而成。