首页 > 开发 > CSS > 正文

关于CSS3 动画transition的一个问题

2017-09-12 09:39:43  来源: 网友分享
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 连接上时,颜色是渐进变化的,移开鼠标时也会有一个颜色渐变的效果,请问是怎样做到的。

解决方案

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;    }}