标签归档:文字特效

HTML5 Canvas弹性文字动画

HTML5中,Canvas上不仅可以绘制图形和动画,还可以实现各种炫酷的文字动画特效。之前分享过一篇文章7款超华丽的HTML5 Canvas文字动画特效,其中就有不少令人惊叹的HTML5文字特效。这次我们给大家分享的也是一款基于HTML5 Canvas的文字动画,这款文字动画是将文字悬挂在富有弹性的细线上,用鼠标拖动文字即可让其在各个方向弹动。

html5-canvas-elasticity-text

在线演示源码下载

CSS3卡片折叠样式3D文字标题特效

在网页上,文字是信息描述的主要手段,我们可以设置文字的字体、大小、颜色等基本属性 。CSS3标准的出现,可以让文字拥有更多的样式甚至是一些复杂的动画。今天我们要分享给大家的是一款基于CSS3的卡片折叠样式的文字特效,每一个字母之间像是折叠的卡片连接在一起一样,鼠标滑过后文字卡片也上下凹凸浮动,具有3D立体的视觉效果。

css3-card-fold-text-title

在线演示源码下载

HTML5 Canvas火焰文字动画特效

HTML5技术确实挺强大的,特别是Canvas画布更是让网页动画变得丰富多彩。今天我们分享的是一款基于HTML5 Canvas的火焰文字动画特效,它可以让任意文字上方冒出密集的火焰,就像这些文字在熊熊燃烧一样。与这款火焰动画类似的还有以前分享的HTML5 Canvas幻彩火焰文字特效

html5-canvas-fire-text-animation

在线演示源码下载

接下来我们一起来看看如何实现这款炫酷的HTML5 Canvas火焰文字动画特效。

HTML代码

由于是基于Canvas的,所有的动画细节都在Canvas上绘制实现,因此html代码就非常简单,仅仅提供一个canvas元素即可。代码如下:

<canvas id="canvas" width="1024" height="600"></canvas>

别看这简单的一个元素,它结合CSS3和JavaScript可以实现非常复杂的动画。

CSS3代码

CSS代码也没有什么特别,仅仅是定义Canvas的背景颜色:

canvas {
  background-color:#000000;
  left: 0;
}

JavaScript代码

[......]

阅读全文>>

HTML5/CSS3炫酷阴影发光文字特效组合

今天我们要给大家介绍一款非常炫酷的HTML5/CSS3阴影文字特效,一共有9组不同的样式,这9组文字中,除了有不同的字体外,每一组的文字阴影和文字放光颜色都不同,看起来都十分漂亮,遗憾的是,中文并没有那么漂亮的字体了。

html5-css3-shadow-shine-text

在线演示源码下载

SVG/CSS3 3D阴影文字 阴影线条流动特效

今天我们给大家分享另外一款基于SVG和CSS3的文字动画,它们的特点是文字有阴影特效,呈现出3D立体的视觉效果,而且这不是一般的阴影,而是借助了SVG的路径绘制功能,将阴影线条化,并且阴影线条还可以随着鼠标的滑过而呈现流动的动画特效,你也可以对文字进行加粗。

svg-css3-3d-shaded-text

在线演示源码下载

CSS3 3D文字拉伸发光动画

自从CSS3标准诞生以后,我们网页上的元素变得逐渐生动起来,就连最单调的文字也变得非常炫酷。这次要分享的一款基于CSS3的3D文字拉伸动画就非常不错,当我们将鼠标滑过文字时,文字就会出现拉伸发光的动画特效,看上去十分大气。

css3-3d-stretch-text

在线演示源码下载

CSS3/SVG火焰背景遮罩文字动画

之前我们分享过一些炫酷的带遮罩的CSS3文字动画特效,比如这款基于P5.JS的HTML5文字遮罩粒子动画就非常不错。今天要分享的也是一款CSS3遮罩文字动画,这次的遮罩是动态燃烧的火焰作为背景,同时也利用了SVG的路径功能绘制文字的镂空形状,非常炫酷。

css3-svg-fire-text

在线演示源码下载

超华丽CSS3 3D五彩发光文字动画

不久前我们已经为大家介绍过一些炫酷的CSS3文字动画和HTML5文字特效,有些都非常不错,比如最近刚分享的CSS3文字跳动旋转动画以及HTML5 Canvas幻彩火焰文字特效。这次我们要来看一款纯CSS3实现的3D五彩发光文字动画,文字呈现3D立体的视觉效果,同时定时会变换字体颜色,并且文字周围微微带有发光的效果,这样就更加体现出3D的动画效果了。

css3-3d-shine-text

在线演示源码下载

CSS3文字跳动旋转动画

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

css3-text-flipping

在线演示源码下载

HTML5 Canvas幻彩火焰文字特效

之前我们分享过很多基于HTML5 Canvas的火焰渲染动画特效,比如这款HTML5 Canvas炫酷的火焰风暴动画和这个HTML5动感的火焰燃烧动画特效。这次来分享一款很特别的HTML5文字特效,文字同时是利用火焰来渲染的,并且燃烧的文字火焰还可以随时改变颜色,让文字更显幻彩。

html5-canvas-colorful-text

在线演示源码下载