关于CSS3 动画transition的一个问题-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

关于CSS3 动画transition的一个问题

天蓬老师 2017-04-17 11:05:58

432

a{ color: #0088cc; text-decoration: none; &:hover, &:active, &:focus{ color: orange; text-decoration: none; -webkit-transition: color 250ms ease-in 0ms; -moz-transition: color 250ms ease-in 0ms; -ms-transition: color 250ms ease-in 0ms; -o-transition: color 250ms ease-in 0ms; transition: color 250ms ease-in 0ms; } }

在alloyteam blog看到的一个效果。就是鼠标移动到 a 连接上时，颜色是渐进变化的，移开鼠标时也会有一个颜色渐变的效果，请问是怎样做到的。

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

reply all (2)

PHPzhong2017-04-17 11:07:58 2 floor

a{ color: #0088cc; text-decoration: none; -webkit-transition: color 250ms ease-in 0ms; -moz-transition: color 250ms ease-in 0ms; -ms-transition: color 250ms ease-in 0ms; -o-transition: color 250ms ease-in 0ms; transition: color 250ms ease-in 0ms; &:hover, &:active, &:focus{ color: orange; } }

Like+0

Add Reply

小葫芦2017-04-17 11:07:58 1 floor

a:link, a:visited, a:active { text-decoration: none; -webkit-transition: ...; -moz-transition: ...; -ms-transition: ...; -o-transition: ...; transition: text-shadow 500ms ease-in 0ms, color 500ms ease-in 0ms; }

transition: text-shadow 500ms ease-in 0ms, color 500ms ease-in 0ms;
这一行中定义了指定两个属性的动画：text-shadow跟color，你说的颜色渐进就是color 500ms ease-in 0m；
可以理解为：
执行变化的属性：color；
动画持续时间：500ms；
时间函数（定义了执行动画的方式）：ease-in（由慢到快）；
延迟时间：0m；