一、鼠标悬浮时，字体颜色从左到右依次变化
<!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. Linux配置JDK、Tomcat和Mysql免安装版

    现在已有JDK.Tomcat和mysql的tar.gz压缩文件 1.解压文件 (1)解压tar.gz tar -zxvf 待解压文件名 -C 解压到目标文件目录 (2)解压zip unzip 待解压文 ...

  2. spring的bean创建过程

    Spring的bean创建过程 步骤 执行过程 描述 1 ThreadLocal.set bean创建之前将beanName的一些属性放进ThreadLocal,避免多线程创建bean导致问题,并发创 ...

  3. centos7初上手2-安装tomcat服务

    上一篇文章说完安装mysql数据库,这篇文章来学习一下tomcat安装 1.先做准备工作,安装jdk,先看服务器上有没有安装相关java文件 下载好1.8版本的安装包,用xftp传到服务器上(根据个人 ...

  4. MySQL行转列、列转行

    一.行转列 有如图所示的表,现在希望查询的结果将行转成列 建表语句如下: CREATE TABLE `TEST_TB_GRADE` ( `ID` int(10) NOT NULL AUTO_INCRE ...

  5. centos下使用yum 安装pip

    本文为转载:原文出处:https://www.cnblogs.com/saolv/p/6963314.html centos下安装pip时失败: [root@wfm ~]# yum -y instal ...

  6. php上传文件配置

    根据需要调整php.ini文件内容,完成后重启服务器即可. 上传文件相关配置内容: file_uploads = on ;是否允许通过HTTP上传文件的开关.默认为ON即是开 upload_tmp_d ...

  7. commons-lang常用方法

    跟java.lang这个包的作用类似,Commons Lang这一组API也是提供一些基础的.通用的操作和处理,如自动生成toString()的结果.自动实现hashCode()和equals()方法 ...

  8. python之django基础

    看了不是同一期的视频,发现9期老师线性引入的方式,讲得django更加易于理解掌握. 抱歉的是,笔记没有整理就发上来了.希望看到的人不要被我带偏. 1. 新建Django项目 命令行创建: djang ...

  9. python网络之web框架

    逐步引入: 1. 最简单的web server #!/usr/bin/env python # coding:utf-8 import socket sk = socket.socket() sk.b ...

  10. 微信小程序拒绝授权，反复调起原生授权框。

    最近堕落了,有一阵子没有更新博客园了.一是比较忙,其次也没什么好的题材和工作中的解决方案可以分享的,想想还是把罕见的反复调起原生小程序授权框的方案拿出来说说.   市面上常见的解决方案是第一次拒绝后, ...