资讯频道 → Web前端
阅读更多

4顶
2踩

Web前端

原创新闻 6 个典型的 HTML5 文字特效示例

2012-08-30 09:50 by 见习编辑 html5_dev 评论(1) 有9982人浏览
html5 css 文字 JavaScript

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

在HTML5出现之前，网页上的文字比较单一，除了设置大小、颜色、粗细之外，没有任何出色的特效，当然优秀的文字排版也能让页面显得舒服温馨，但是当我们需要让页面变得震撼惊奇的话，那么HTML5就能帮助我们实现一些超酷的文字特效了。下面是6个典型的HTML5文字特效案例，仅供大家参考。

1、绚丽的jQuery和CSS3文字动画特效

文字特效在CSS3产生后也有了很大的发展，利用各种CSS3属性可以让你的文字在网页中分外动感。



在线示例 / 源码下载

2、HTML5弹跳文字特效

使用纯HTML5的画布来实现动画及其图形。整个效果使用小球来组合生成字体，如果你的鼠标逼近这些小球，它们会四散而逃，当你的鼠标离开后，它们又自动复原，效果很酷。



在线示例 / 源码下载

3、CSS3文字按指定路径方向显示

在CSS3还没出现前，网页中的文字只能水平来显示。但是有了CSS3后，我们可以实现文字按指定路径方向显示。这里利用CSS3的text- transform options: rotation, skew, matrix, transform-origin等属性来实现对文字按不同的路径方向显示。



在线示例 / 源码下载

4、CSS3燃烧的文字特效

这是一个用CSS3结合jQuery实现的燃烧的文字特效，这个特效主要用到了CSS3的text-shadow属性，并结合jquery动态渲染投影，从而实现了文字燃烧的效果。



在线示例 / 源码下载

5、CSS3文字镂空特效

利用CSS3中的-webkit-text-stroke属性实现文字镂空效果。-webkit-text- stroke可以为文字添加边框。它不但可以设置文字边框的宽度，也能设置其颜色。而且，配合使用color: transparent属性，你还可以创建镂空的字体。



在线示例 / 源码下载 / 制作教程

6、CSS3文字阴影

用CSS3实现文字的阴影效果非常简单，这里的阴影文字特效非常具有代表性。不同的阴影方式有着不同的渲染效果，除了普通的文字阴影，还能实现发光、燃烧、多重阴影等效果的文字。



在线示例 / 源码下载

4
顶
2
踩
评论 共 1 条 请登录后发表评论
1 楼 chaletli 2012-09-06 14:51
在线示例竟然都是404....

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 纯html5例子,八个炫酷的html5例子

    1、HTML5 Canvas火焰燃烧动画 如同掉落的火球这次要分享的是一款超级绚丽的HTML5火焰动画，画面上是一个熊熊燃烧的小火球，小球燃烧的火焰非常逼真，会比较消耗CPU。另外这个动画是在HTML5 Canvas上实现的，修改起来...

  • HTML5+CSS、CSS3基础知识点总结

    一、选择器 选择器分为基础选择器和复合...类选择器可以被多个元素调用。 id 选择器只能允许一个标签调用。 类选择器使用的较多，id 选择器用于唯一特性的标签。 基础选择器 作用 特点 使用情况 用法 标签选

  • 前端HTML5+CSS3学习笔记

    前端HTML5+CSS3学习笔记

  • html5基础知识，期末复习大全

    html，css，js超详细基础知识及响应式设计，动画等进阶

  • HTML5andCSS3面试题大全

    文章目录1.CSS引入(1)有哪些引入方式？通过link和@import引入有什么区别？（* ）(2)Style 标签写在 body 后和 body 前有什么区别？(3)什么是 FOUC(Flash of ...****5.块级元素水平居中的方法？** 1.CSS引入 (1)有哪些引

  • 应聘html5技能,【前端面试】HTML5+CSS3初级面试

    1、简单说一下对HTML5+CSS3的了解。HTML5和CSS3不仅是两项新的Web技术标准，而且代表了下一代HTML和CSS技术。其未来的发展前景已经可以预见，那就是HTML5必将被越来越多的Web开发人员所使用。各大浏览器厂家已经积极...

  • 第4版 网页设计与制作 HTML5+CSS3+JavaScript(赵丰年 编著）学习笔记

    第1章 HTML5基础 1.万维网（World Wide Web,WWW)由大量的Web服务器构成。我们通过浏览器访问这些服务器上的网页。不同的网页通过超链接联系在一起，构成了WWW的网状结构。 2.HTML是表示网页的一种规范，它通过标记...

  • 重温前端基础（一） HTML、CSS、H5C3

    构成： 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。 标准 说明 结构 结构用于对网页元素进行整理和分类，咱们主要学的是HTML。 表现 表现用于设置网页元素的版式、颜色...

  • HTML5+CSS3笔记 (黑马pink老师)

    -- 文档类型声明标签 告诉浏览器这个页面才取HTML5版本来显示页面 --> <!DOCTYPE html> <!-- lang:语言 en:英语 设置网页语言 --> <html lang="en"> <head> <!-- // charset:字符集...

  • html语言字体是否依赖客户端,【前端面试】HTML5+CSS3初级面试1

    1、简单说一下对HTML5+CSS3的了解。Html5和CSS3不仅是两项新的Web技术标准，而且代表了下一代HTML和CSS技术。其未来的发展前景已经可以预见，那就是HTML5必将被越来越多的Web开发人员所使用。各大浏览器厂家已经积极...

  • 利用HbuilderX制作简单网页： HTML5期末大作业——html5漫画风格个人主页

    ❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，...

  • 论道HTML5 PDF扫描版

    论道HTML5先简要介绍了如何用HTML5和CSS3制作网站，然后全面介绍了API和Canvas2D，接着介绍了如何在手机浏览器上开发HTML5相关的应用、WebSocketAPI相关的三个案例和时下较为流行的Node.js环境，最后介绍了瘦服务器...

  • html5+css3基础学习笔记

    块元素、行内元素 块元素 常见的块元素有 ~ 、 、 、 、 、 等 其中 标签是最典型的块元素 自己独占一行 高度、宽度、外边距以及内边距都可以控制 宽度默认是容器（父级宽度）的100% 是一个容器 文字类的元素内部不...

  • 达内2016前端开发知识点总结--HTML5--8天

    HTML5 day01 第三阶段： AJAX- 8 —— 综合且容易出错 HTML5新特性- 7 —— 零散神不聚 Bootstrap - 5 —— 玩命儿被单词 今日目标： (1)WebStorm的使用—— 掌握 (2)H5新特性之一——表单2.0—— 掌握 ...

  • Html+CSS

    标签对中的第一个标签是开始标签，第二个标签是结束标签。3.有些特殊的标签必须是单个标签（极少情况），例如「/>，我们称为单标签。1.以上三个代码vscode自动生成，基本不需要我们重写.2.文档类型声明标签，告诉...

  • vmware workstatiions pro 17.6.1个人使用免费，不用证书直接安装使用

    虚拟机vmware workstatiions pro 17.6.1个人使用免费，不用证书直接安装使用

  • scipy-1.2.0-cp35-cp35m-linux_armv7l.whl

    scipy-1.2.0-cp35-cp35m-linux_armv7l.whl

  • 基于springboot爬虫高考志愿智能推荐系统源码数据库文档.zip

    基于springboot爬虫高考志愿智能推荐系统源码数据库文档.zip

  • bimdata_api_client-4.3.0-py3-none-any.whl

    bimdata_api_client-4.3.0-py3-none-any.whl

  • Pillow-7.0.0-cp37-cp37m-linux_armv7l.whl

    Pillow-7.0.0-cp37-cp37m-linux_armv7l.whl

Global site tag (gtag.js) - Google Analytics