作者归档:sxwgf

jQuery/CSS3 全屏垂直焦点图插件 3D立体翻转切换

这是一款非常不错的jQuery/CSS3全屏焦点图插件,它的特点是切换图片时,图片和图片描述分左右两屏,分别会进行3D翻转分离后拼接,全屏展示非常大气。同时,这款焦点图插件的切换按钮放在有侧边,点击任意小按钮即可切换至相应的图片。

jquery-css3-3d-image-player

在线演示源码下载

CSS3手表倒计时动画 可自定义主题皮肤

早段时间,我们为大家分享过一些比较炫酷和实用的时钟手表插件,比如这款纯CSS3 3D立体圆盘时钟动画HTML5仿Apple Watch时钟动画,效果都非常不错。今天我们要利用CSS3来实现一个手表样式的倒计时动画,功能相对比较简单,最大的特点在于可以切换4种不同的主题皮肤。

css3-watch-timer

在线演示源码下载

10个样式各异的ReactJS水平滑杆插件

之前我们分享过很多基于jQuery和CSS3的水平滑杆插件,比如漂亮的jQuery UI水平滑杆jQuery/CSS3带Tooltip的滑杆动画都相当实用。今天要介绍的也是一款水平滑杆插件,不过它是基于ReactJS的,当然也运用了大量的CSS3特性来渲染各种样式,一共有10种不同风格。

10-reactjs-web-slider

在线演示源码下载

HTML5/SVG运动模糊动画 支持焦点图、弹出层和菜单

这次要分享的是一种基于HTML5和SVG的运动模糊的动画效果,比如在焦点图插件中图片切换时候的模糊效果,弹出层弹出时的模糊效果,还有下拉菜单展开收缩时的模糊效果。大部分我们使用CSS3的模糊属性以及HTML5实现的运动算法,让图片、菜单等元素实现在运动中的模糊动画特效,为了让运动模糊效果更加逼真,我们需要选择一个比较合理的运动算法公式。

html5-svg-motion-blur-effect

在线演示源码下载

SVG/CSS3自行车 模拟自行车行驶动画

之前我们为大家介绍过几款很酷的CSS3自行车动画,比如纯CSS3实现自行车动画特效纯CSS3 3D自行车动画。这次我们要分享的也是一款利用SVG路径特性和CSS3动画特性实现的自行车模拟行驶动画,自行车的外观是利用SVG路径绘制而成,再通过CSS3模拟脚踏板和轮胎的转动。

svg-css3-bike-running

在线演示源码下载

超炫酷的SVG轮船行驶动画

这又是一款非常酷的SVG动画,首先,我们利用SVG的路径特性绘制了一艘高大上的轮船,并且同时绘制了海面以及衬托海面的太阳,注意,你看到的画面中的所有元素都是SVG绘制而成。然后我们调用了简单的JavaScript让轮船在海面上摇摆行驶,看上去还是挺逼真的。

svg-ship-animation

在线演示源码下载

HTML5 SVG圆形钢琴动画 可模拟大部分音调

今天我们要给大家介绍一款之前从来没有分享过的HTML5 SVG动画,它是一个圆形的钢琴,注意它并不只是一个绘制的图形,它是可以弹奏的,我们只需将鼠标滑过相应的按键即可发出不同的钢琴音调,是不是很有趣?是不是觉得和之前介绍的Google电吉他如出一辙?

html5-svg-piano

在线演示源码下载

华丽的HTML5/CSS3输入框聚焦发光动画表单

今天我们要给大家分享一款非常特别的登录表单,基于HTML5和CSS3。当表单加载的时候,会有一段等待加载的动画特效,表单加载完成后会以弹出的方式展现。另外这款登录表单最有趣的地方在于,当我们聚焦输入框时,该输入框会出现气泡发光的动画特效,这一切都是由JavaScript结合CSS3特性实现而成。

html5-css3-focus-shining-form

在线演示源码下载

CSS3文字跳动旋转动画

今天我们要为大家分享一款基于CSS3的文字动画,这款文字动画展现的是可以跳动和旋转的字母文字。之前也有介绍过一些CSS3文字特效,比如HTML5 Canvas幻彩火焰文字特效CSS3实现3D卡通文字效果都非常不错,今天的这款CSS3跳动文字特效希望你也会喜欢。

css3-text-flipping

在线演示源码下载

基于Swiper.js的移动端图片滑块插件 支持自动播放和拖拽

Swiper是目前较为流行的移动端内容滑块插件,底层是基于JavaScript的。今天要分享的这款Swiper.js移动端图片滑块插件功能十分强大,和其他jQuery焦点图插件类似,Swiper也提供图片滑动切换功能,并且支持左右箭头切换和悬浮图片上方的圆形链接点进行快速切换。另外,Swiper还支持自动播放或鼠标拖拽滑动。

swiperjs-image-player

在线演示源码下载