嗯哼。。。本次给大家带来的是 CSS3 的动画,主要为 li 标签从下至上颜色依次渐变的效果,在代码演示地址中的右侧可见。上代码~~~
对于 xBorder 主题,可直接在 style.css 中加入以下代码:
aside ul.ulstyle:hover a {-webkit-transition-property:color;-webkit-transition-timing-function: cubic-bezier(1,0,1,0);transition-property:color;transition-timing-function: cubic-bezier(1,0,1,0);} aside ul.ulstyle a{-webkit-transition: all 1s ease-in-out;transition: all 1s ease-in-out;} aside ul.ulstyle:hover li:nth-child(1) a {color:#DA020E;-webkit-transition-duration: 1s;transition-duration: 1s;} aside ul.ulstyle:hover li:nth-child(2) a {color:#D30454;-webkit-transition-duration: .9s;transition-duration: .9s;} aside ul.ulstyle:hover li:nth-child(3) a {color:#CB0A9B;-webkit-transition-duration: .8s;transition-duration: .8s;} aside ul.ulstyle:hover li:nth-child(4) a {color:#C729B0;-webkit-transition-duration: .7s;transition-duration: .7s;} aside ul.ulstyle:hover li:nth-child(5) a {color:#C75E81;-webkit-transition-duration: .6s;transition-duration: .6s;} aside ul.ulstyle:hover li:nth-child(6) a {color:#C7A236;-webkit-transition-duration: .5s;transition-duration: .5s;} aside ul.ulstyle:hover li:nth-child(7) a {color:#C7C40D;-webkit-transition-duration: .4s;transition-duration: .4s;} aside ul.ulstyle:hover li:nth-child(8) a {color:#B8C10F;-webkit-transition-duration: .3s;transition-duration: .3s;} aside ul.ulstyle:hover li:nth-child(9) a {color:#A2AD22;-webkit-transition-duration: .2s;transition-duration: .2s;} aside ul.ulstyle:hover li:nth-child(10) a {color:#767954;-webkit-transition-duration: .1s;transition-duration: .1s;}
对于其它的主题,可以使用以下代码:
ul a, ul:hover a {-webkit-transition-property:color;-webkit-transition-timing-function: cubic-bezier(1,0,1,0);transition-property:color;transition-timing-function: cubic-bezier(1,0,1,0);} ul a{-webkit-transition: all 1s ease-in-out;transition: all 1s ease-in-out;} ul:hover li:nth-child(1) a {color:#DA020E;-webkit-transition-duration: 1s;transition-duration: 1s;} ul:hover li:nth-child(2) a {color:#D30454;-webkit-transition-duration: .9s;transition-duration: .9s;} ul:hover li:nth-child(3) a {color:#CB0A9B;-webkit-transition-duration: .8s;transition-duration: .8s;} ul:hover li:nth-child(4) a {color:#C729B0;-webkit-transition-duration: .7s;transition-duration: .7s} ul:hover li:nth-child(5) a {color:#C75E81;-webkit-transition-duration: .6s;transition-duration: .6s;} ul:hover li:nth-child(6) a {color:#C7A236;-webkit-transition-duration: .5s;transition-duration: .5s;} ul:hover li:nth-child(7) a {color:#C7C40D;-webkit-transition-duration: .4s;transition-duration: .4s;} ul:hover li:nth-child(8) a {color:#B8C10F;-webkit-transition-duration: .3s;transition-duration: .3s;} ul:hover li:nth-child(9) a {color:#A2AD22;-webkit-transition-duration: .2s;transition-duration: .2s;} ul:hover li:nth-child(10) a {color:#767954;-webkit-transition-duration: .1s;transition-duration: .1s;}
因为各种主题有所不同,在使用了以上代码后某些同学可能会出现无效的情况,这时候可需要你慢慢修改咯~~