HTML5 SVG和CSS3超酷文字遮罩动画特效

这是一组使用HTML5
SVG和CSS3技术制作的超酷文字遮罩动画特效。这一组文字遮罩动画特效中共有23种效果，分别使用23种不同的SVG和CSS3技术来实现。

这23种不同的SVG和CSS3技术实现的文字遮罩动画效果的浏览器兼容性也各不相同。在chrome浏览器中可以看到大部分效果，建议使用chrome浏览器来查看demo。

在线演示：http://www.htmleaf.com/Demo/201502181394.html

下载地址：http://www.htmleaf.com/html5/SVG/201502181393.html

时间： 2024-11-02 16:43:42

HTML5 SVG和CSS3超酷文字遮罩动画特效的相关文章

超炫HTML5 SVG聊天框拖拽弹性摇摆动画特效

这是一款很有创意的HTML5 SVG聊天框拖拽弹性摇摆动画特效. 用户能够用鼠标点击或用手滑动聊天框上的指定区域,该区域会以很有弹性的弹簧效果拉开聊天用户列表.点击一个用户头像后.又以同样的弹性特效切换到聊天界面,而且用户头像会移动到聊天界面的右上角.整个动画弹性十足,效果很震撼. 效果演示:http://www.htmleaf.com/Demo/201506031963.html 下载地址:http://www.htmleaf.com/html5/SVG/201506031962.html

HTML5 SVG和CSS3炫酷液态菜单按钮特效

这是一款使用HTML5 SVG Filters 和CSS3制作的效果非常炫酷的液态菜单按钮特效.该菜单特效开始时显示一个主菜单按钮,当点击该按钮时,子菜单按钮会像液态物质一样依次展开,其效果就像一粒水滴分离为两粒一样. 效果演示:http://www.htmleaf.com/Demo/201504081648.html 下载地址:http://www.htmleaf.com/html5/SVG/201504081647.html

html5和CSS3超酷购物车结算动画特效

这是一款效果十分炫酷的html5和css3购物车结算动画特效插件.该购物车结算动画提供了4种效果,每种效果都使用CSS3来制作炫酷的动画特效,这些效果使用户的购物结算体验大大的增强了. 如何设计购物车结算功能界面才能让用户得到最好的体验,如果设计得好,它可以为用户带来一个愉快的购物历程,如果设计得不好,那么一大堆东西堆积在购物车中,用户也不知道如何去处理它们.这个插件正是为解决这个问题而设计的. 在线演示:http://www.htmleaf.com/Demo/201501231255.html

基于HTML5 SVG和Raphaël.js的混合图标动画特效插件教程

一.安装$ npm install hybicon$ bower install hybicon 二.使用方法<script src="js/required/raphael.min.js"></script><script src="js/hybicon.min.js"></script> 三.Html结构<div data-hybicon="icon1-icon2"></div

基于HTML5 SVG和CSS3炫酷蹦床式图片切换特效

今天给大家分享一款效果非常炫酷的HTML5 SVG和CSS3蹦床式图片切换特效插件.该图片切换插件在进行图片切换时,整个屏幕就像一张大蹦床一样,将图片弹射出去,切换到另一张图片,效果非常有创意.效果图如下: 在线预览源码下载 HTML结构该图片切换特效的HTML结构中,第一个元素是SVG图形,当切换图片时,它将从一个规则的矩形变为一个被压缩的矩形. <div class="stack"> <ul id="elasticstack" clas

HTML5 SVG简单的动态绘制轮廓线条动画插件

walkway是一款非常简单的HTML5 SVG动态绘制轮廓线条动画插件.它支持SVG的path,line 和 polyline元素.walkway使用起来简单方便,可以制作出非常酷的SVG线条动态绘制效果.更好的动态绘制线条插件可以参考:html5 svg线条动态绘制文字轮廓边框动画.HTML5 SVG图形轮廓线条绘制动画插件-vivus 和 html5 svg线条动态绘制iphone边框动画效果. 在线演示:http://www.htmleaf.com/Demo/201501261282.h

html5跟随鼠标炫酷网站引导页动画特效

html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/texiao/html5/ 效果图: 以下是源代码: 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Co

3种炫酷CSS3复选框checkbox动画特效

这是一款效果非常炫酷的CSS3复选框checkbox动画特效.这组复选框动画特效共3种效果,它们都是在原生checkbox元素的基础上进行了美化,在用户点击复选框的时候制作出非常酷的动画效果. 在线预览源码下载使用方法 HTML结构普通的HTML checkbox复选框控件的样式非常的平淡.在现代网页设计中,我们可以通过CSS3来为它设置更加漂亮的外观和动画特效.通过CSS的@keyframe属性,我们就可以制作出各种神奇的复选框动画特效. 在这些复选框动画的DEMO中,使用的都是无序

一款jquery和css3实现的卡通人物动画特效

之前为大家分享了很多jquery和css3的动画实例.今天给大家带来一款非常炫的jquery和css3实现的卡通人物动画特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div class="wrapper"> <div class="border-circle" id="one"> </div> <div class="border-circle" id=&