CSS3变换入门（3）
作者：神飞 来源：前端观察 发布时间：2010-01-30 13:29:00
标签：css3,变换,入门,dhtml
一个简单的变换
让我们假设一个简单的变换，在用户的鼠标经过一个链接的时候，将颜色从一个变换成另外一个。与其它CSS属性一样，变换也是直接添加到要使用它的选择器中。该属性可以采用下面的4个值。
CSS property：
被变换的属性(比如, color)。看一下下面的表格了解所有可以被变换的CSS属性列表。
Duration：
变换持续的时间，通常以秒来计算(比如, .25s).
Timing function：
允许你控制持续的时间的计算方式。与其使用一个简单的线性计算，你可以使变换加速(渐入)或者减速(淡出)，或者甚至specify a beat or count (比如，linear). More on this later in the article.
Delay：
在动作和变换开始之间等待多久，通常用秒来表示(比如, .1s)。如果你不想延迟，该值可省略。
因为变换属性始于Webkit扩展，我们不得不同时使用transition 和-webkit-transition 属性以向后兼容。
让我们首先提阿贾这这些属性到:hover 伪类中：
a:hover {
color: red;
-webkit-transition: color .25s linear;
transition: color .25s linear;
}
那么现在，当鼠标经过一个链接，不会直接从蓝色跳转到红色，而是用四分之一秒的时间逐渐变换它们的中间颜色(过渡颜色)。
当然，我们也希望变换回到默认的链接颜色，那么我们可以添加一个变换到:link (以及:visited)伪类上，并在它褪去之前添加一个简单的延迟(十分之一秒) ：
a:link, a:visited {
color: blue;
-webkit-transition: color .25s linear .1s;
transition: color .25s linear .1s;
}
0
投稿猜你喜欢
- 这篇文章主要介绍了Python监控服务器实用工具psutil使用解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习
介绍：pyenv-virtualenv是pyenv的一个插件，作用如同virtualenv一样，是用来管理虚拟环境的，配合pyenv主体使用- 此处为mysql驱动mysql.data.dll注意：此处X86版本较多，X64版本较少X64:X86:Vs添加引用过程：总结以上所述是小编
- 脚本之家下载：JetBrains DataGrip 2020.1 免费中文正式版(附汉化包+安装教程) 最新DataGrip202
- 什么是 manimManim 是一个用于精确编程动画的引擎，专为创建解释性数学视频而设计。注意，有两个主要版本的 manim。该存储库最初是
- 每次在"万达影城"网上购票总会用到左上角选择城市的功能。如下：今天就在ASP.NET MVC中实现一下。我想最好的方式应
- 闭包与defer1.闭包闭包 ： 一个函数与其相关的引用环境组合的一个实体，其实可以理解为面向对象中类中的属性与方法。如代码块中，函数fun
- php高并发之opcache今天工作的时候接触到客户的一台服务器，业务逻辑比较简单 。估算pv在120w左右吧，用的是阿里云2c4g的服务器
- mysql 8.0.20 安装配置方法图文教程整理下，供大家参考。一、准备工作1、检查是否已经安装mysql当前计算机没有安装mysql。2
- python ThreadPoolExecutor线程池的工作线程中出现异常时，主线程不会捕获异常。解决方法1：直接在需要执行的任务方法中添
- asp之家注：也许你还没有接触过使用js来调用asp文件，也许你也不知道如何用JS调用asp文件，甚至你也不知道JS调用asp文件有什么好处
- 起因：学校运河杯报了个项目，制作一个天气预测的装置。我用arduino跑了BME280模块，用蓝牙模块实现两块arduino主从机透传。但是
- MySQL扩展库操作MySQL数据库的步骤如下：1：获取连接.2：选取书库。3：设置操作编码。4：发送SQL指令（MySQL数据库可以分为四
- python中eval和int的区别是什么？下面给大家介绍一下:1.eval()函数eval(<字符串>)能够以Python表达
- 重置系统后，很久之前安装的MySQL数据库出现了控制台查询中文乱码问题，时间太久早已经不记得怎么设置了。网上查询了许多，各种设置，重启数据库
- 本文实例为大家分享了bootstrap显示隐藏的具体代码，供大家参考，具体内容如下<html><head><m
- 在上一期中作者向诸位简要介绍了 ASP 脚本语言之一 VBScript 的一些基本常识，本期将继续给大家讲解 VBScript 的脚本编写方
- 数据import numpy as npimport pandas as pddata = [{'Name': '小
- 一、场景浏览器访问淘宝，再访问天猫，继续访问1688......此时，浏览器中的cookie是什么状态？显然，包含上述3个网站的所有cook
- 间类型：尽量使用TIMESTAMP类型，因为其存储空间只需要 DATETIME 类型的一半。对于只需要精确到某一天的数据类型，建议使用DAT
