关于CSS3 动画transition的一个问题
天蓬老师
天蓬老师 2017-04-17 11:05:58
0
2
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)
PHPzhong
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; } }
    小葫芦
    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-shadowcolor,你说的颜色渐进就是color 500ms ease-in 0m
    可以理解为:
    执行变化的属性:color
    动画持续时间:500ms
    时间函数(定义了执行动画的方式):ease-in(由慢到快);
    延迟时间:0m

      Latest Downloads
      More>
      Web Effects
      Website Source Code
      Website Materials
      Front End Template
      About us Disclaimer Sitemap
      php.cn:Public welfare online PHP training,Help PHP learners grow quickly!