标签归档:文字特效

基于Splitting.js的CSS3魔幻文字动画特效

今天给大家分享一款很不错的CSS3文字动画特效,它主要给用户在选择下拉框时呈现一种比较魔幻可怕的动画场景。这个动画使用了Splitting.js将单词拆分成一个个字母,然后通过CSS给字符添加背景图片,然文本拥有背景渲染的视觉效果。同时当我们下拉选项时,下拉框中的文本将会出现闪烁发光的动画效果,文本选中后,网页的背景图片也会以渐变的方式改变为对应文本的背景图片。

css3-splitting-text

在线演示源码下载

CSS3实现的卡通文字动画

这是一个利用CSS3动画特性和Google字体库实现的卡通文字动画,首先引入Google的字体库,这样我们就可以在css中使用”Luckiest Guy”字体,这种字体就体现了卡通的样式。再利用CSS3将文字按圆弧路径显示,然后再用CSS3的动画特性让文字显示的时候采用跳入和淡入的方式,实现的比较可爱的动画效果。

css3-cartoon-text

在线演示源码下载

纯CSS3炫酷的文字背景动画

CSS3的出现可以让我们使用纯CSS就可以实现一些比较复杂的网页动画特效,比如可以让最单调的文字出现炫酷的背景动画,这是在CSS3之前无法想象的。今天分享一个纯CSS3实现的文字背景动画,文字的背景不是纯色,也不是渐变色,而是不断播放的动画,这让文字产生了更多的活力。

pure-css3-text-bg-animation

在线演示源码下载

HTML5 Canvas文字放射状线条动画

之前我们分享过很多基于HTML5和CSS3的文字特效,比如最近分享的这款HTML5 Canvas弹性文字动画。今天我们分享的这个文字特效也是基于Canvas实现的,在文字载入的时候,文字由无数放射状的线条组成,形成类似发光的效果。

html5-canvas-text-line-shine

在线演示源码下载

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

在线演示源码下载