一、鼠标悬浮时，字体颜色从左到右依次变化
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>box-size</title>

    <style type="text/css">

        h1{

            letter-spacing: 100px;/*必要*/

            position: relative;/*必要*/

            cursor: pointer;

            list-style-type: none;

        }

        h1:before{

            content: attr(title);/*必要*/

            width: 0%;/*必要*/

            position: absolute;/*必要*/

            z-index: 2;/*必要*/

            color: #e49d99;

            white-space: nowrap;

            overflow: hidden;/*必要*/

            transition: 3s;/*必要*/

        }

        h1:hover:before{

            width: 100%;/*必要*/

        }

    </style>

</head>

<body>

    <h1 title="ABCDABCD">ABCDABCDE</h1>

</body>

</html>

CSS 字体交互特效的更多相关文章

  1. CSS字体属性大全

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...

  2. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  3. Css字体中英文对照表

    css字体中文.英文.Unicode名对照表 另外注意:繁体中文字体名,在简体中文系统中是不能被识别的. 中文名 英文名 Unicode Unicode 2 Mac OS 华文细黑 STHeiti L ...

  4. css字体设置

    css字体设置 .selector{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,S ...

  5. 2.css字体单位

    这期简单说说css字体单位 字体单位有三种:px.em.rem 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px. % 百分比 in 英寸 cm 厘米 mm 毫米 e ...

  6. Css - 字体图标

    Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...

  7. CSS 字体(font)实例

    CSS 字体(font)实例CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母).CSS 字体系列在 CSS 中,有两种不同类型的字体系列名称: 通用字体系列 - 拥 ...

  8. css字体中英文对照表（转）

     在css文件中,我们常看到有些字体名称变成了乱码,这是由于网页开发者将中文字体的名字直接写成了中文,而css文件本身没有声明字符编码方式,查看时就出现了乱码.为了避免这种乱码状况出现,可以将css文 ...

  9. css 字体样式设置

    css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人   css字体样式(Font Style) ...

随机推荐

  1. python之路-bytes数据类型

    一. python 3最重要的新特性大概要算是对文本和二进制数据作了更为清晰的区分.文本总是Unicode,由str类型表示,二进制数据则由bytes类型表示.python 3不会以任意隐式的方式混用 ...

  2. jquery自定义函数

    /** *jquery 的拓展方法 *//** * 给btn 添加去除disabled */$.fn.disabled = function() { $(this).each(function(ind ...

  3. MySQL数据库--思维导图

    MySQL数据库--思维导图

  4. fastreport窗口重置(适用于属性、数据等窗口显示不出来)

    找到如下路径: C:/Users/账户名/AppData/Local/FastReport/FastReport.config 删除即可. 记得先退出使用FastReport的程序,再删除

  5. OpenCV3如何使用SIFT和SURF Where did SIFT and SURF go in OpenCV 3?

    Installation and Usage If you have previous/other version of OpenCV installed (e.g. cv2 module in th ...

  6. linux链接及文件互相上传下载

    若排版紊乱可查看我的个人博客原文地址 基本操作 本篇博客主要介绍如何去链接远程的linux主机及如何实现本地与远程主机之间文件的上传下载操作,下面的linux系统是CentOS6.6 链接远程linu ...

  7. JavaWeb开发流程

  8. AutoCAD 2019.0.1 Update 官方简体中文版

    欧特克三维机械设计软件AutoCAD 2019版本于2018年3月23号全球正式发布,新版本图标全新设计,视觉效果更清晰:在功能方面,全新的共享视图功能.DWG文件比较功能:现在打开及保存图形文件已经 ...

  9. Linux监控

    第三十次课 Linux监控 目录 一. Linux监控平台介绍 二. zabbix监控介绍 三. 安装zabbix 四. 忘记Admin密码如何做 五. 主动模式和被动模式 六. 添加监控主机 七. ...

  10. Ruby中puts，print，p的区别

    如果字符串的行尾没有包含换行符,puts就会添加一个,但print不会: print会精确打印内容并让光标留在末尾(在某些系统平台,在程序输出的末尾会自动换行): p会输出一个审查字符串,它通常会包含 ...