一、鼠标悬浮时，字体颜色从左到右依次变化
<!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. 单链表ADT

    本博客第一篇学术性博客,所以还是写点什么东西: 首先这篇博客以及以后的博客中的代码尽量百分之90是自己写过的: 可能有部分图片和代码是我认为别人更好的故摘抄下来, 本人三观正确,所以一定会表明来源: ...

  2. 201671010142 2017-2 《java第十二十三章学习感悟》

    Swing编程第一步,需要导入Swing相关包,即javax.swing.*. 接下里需要设置界面外观风格,使用到UIManager类. 设置完外观之后一定要调用 SwingUtilities.upd ...

  3. Static，重载，List的知识点

    声明为static的成员可以在它的类的对象创建之前被访问,静态方法不能访问实例变量. 声明为static的变量称为静态变量或类变量,static可以用来修饰属性.方法和代码块. 多重继承的初始化顺序是 ...

  4. SQL-56 获取所有员工的emp_no、部门编号dept_no以及对应的bonus类型btype和recevied，没有分配具体的员工不显示

    获取所有员工的emp_no.部门编号dept_no以及对应的bonus类型btype和recevied,没有分配具体的员工不显示CREATE TABLE `dept_emp` ( `emp_no` i ...

  5. 以太坊Bootstrap和Kademlia算法实现逻辑简介（基于cpp-ethereum）

  6. 网络原因导致的 spring cloud config 读取git上的配置文件时报错：Cannot clone or checkout repository

    今天在公司使用spring cloud config搭建配置中心的时候,出现了读取不到git库的问题:Cannot clone or checkout repository.在网上百度,前面几个答案都 ...

  7. [python3.6+opencv] 01 完成读取图片操作

    学习一下opencv3 奈何vs2017配的云里雾里,还是使用python吧 --人生苦短,python来凑 --使用Pycharm操作,面向界面的Pycharm好一些吧(我猜的) 新建Project ...

  8. Openflow协议详解

    http://www.h3c.com/cn/d_201811/1131080_30005_0.htm# 1 OpenFlow背景 转发和控制分离是SDN网络的本质特点之一 .在SDN网络架构中,控制平 ...

  9. Tensorflow系列——Saver的用法

    摘抄自:https://blog.csdn.net/u011500062/article/details/51728830/ 1.实例 import tensorflow as tf import n ...

  10. 如何快速判断一个key是否存在在亿级数据中(bloomFilters)

    面试题 现在有一个非常庞大的数据(亿级),假设全是 int 类型.现在我给你一个数,你需要告诉我它是否存在其中(尽量高效) 分析 采用bloomFilters进行实现(时间&空间尽可能的有效) ...