一、鼠标悬浮时，字体颜色从左到右依次变化
<!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. api接口开发跨域注意事项和设置

    因为跨域请求会先发送一个OPTIONS请求,所以需要判断下OPTIONS请求的就直接返回 if(strtoupper($_SERVER['REQUEST_METHOD'])== 'OPTIONS'){ ...

  2. SQL-54 查找排除当前最大、最小salary之后的员工的平均工资avg_salary。

    题目描述 查找排除当前最大.最小salary之后的员工的平均工资avg_salary.CREATE TABLE `salaries` ( `emp_no` int(11) NOT NULL,`sala ...

  3. kafka consumer 0.8.2.1示例代码

    package test_kafka; import java.util.ArrayList; import java.util.HashMap; import java.util.List; imp ...

  4. Python 元组tuple相关知识

    列表是有序的,列表元素可以被修改.元组是有序的,元组的一级元素不可被修改,但如果是元组的二级.三级元素并且刚好该元素是列表,则可以被修改.元组中的元组可进行for 循环,因此元组也是可迭代对象.字符串 ...

  5. python文件（概念、基本操作、常用操作、文本文件的编码方式）

    文件 目标 文件的概念 文件的基本操作 文件/文件夹的常用操作 文本文件的编码方式 01. 文件的概念 1.1 文件的概念和作用 计算机的 文件,就是存储在某种 长期储存设备 上的一段 数据 长期存储 ...

  6. jar包自动化部署---jenkins

    B.Application Server SVN账号:svn://192.168.1.49/svn/keenyoda-trunk/xxxxxcht=xxxxx 安装jenkins:安装目录:/usr/ ...

  7. cocos Studio使用问题

    使用的时候最好是同一套资源饭在一个文件夹下,或者新建的文件和资源类,一个资源分一个产生的层文件

  8. SpringBoot项目如何打War包

    首先,需要添加Tomcat启动依赖 <dependency> <groupId>org.springframework.boot</groupId> <art ...

  9. Linux中彻底删除Google-Chrome浏览器

    sudo apt-get autoremove --purge google-chrome-stable   卸载chrome后, 删除-/.config/google-chrome,重新安装.

  10. VMware三种网络介绍

    前言 很多人安装虚拟机的时候,经常遇到不能上网的问题,而vmware有三种网络模式,对初学者来说也比较眼花聊乱,今天我就来基于虚拟机3种网络模式,帮大家普及下虚拟机上网的背景知识.(博文原创自http ...