css3动画与动效--按钮元素动画效果

css3动画与动效

1.按钮元素动画效果

 例：鼠标移到链接上从白色慢慢过渡到黑色-----运用transition：all .5s;当超链接元素中任何属性发生变化，都以动画形式呈现，动画的时间为0.5s;

this is a link

样式：

a{
    color:#fff;
    text-decoration:none;
    font-family:sans-serif;
    font-size:34px;
    background:#F03;
    transition:all .5s;
    -webkit-transition:all .5s linear;/*慢慢从白色过度到黑色,让文字颜色在鼠标滑入前后发生变化，还可以将all改为color，效果也一样,linear代表匀速动画*/
    }
a:hover{
    color:#000;}

**transition:inear(匀速动画)/ease/ease-in/ease-out/ease-in-out(慢速，慢速开始，慢速结束，慢速开始和结束)

   transition: color 5.5s linear,background .5s ease-in-out; 为文字和背景动画设置不同的时间和速度曲线，文字时间动画时间为5.5s,速度曲线为linear，背景动画时长为0.5秒，速度曲线为ease-in-out;

    transition:color .5s linear,background .5s ease-in-out 1s;文字颜色已经完全改变后，背景颜色还未发生变化，直至1秒后背景颜色才突然发生变化；

   

  使用after伪元素，连接前用图标修饰：

         先将字体font文件放到与网页同一级目录； 使用@font-face来声明一种自定义字体 icon-font；

@font-face {
    font-family: 'icon-font';
    src: url('font/flat-ui-icons-regular.ttf'), url('font/flat-ui-icons-regular.eot'), url('font/flat-ui-icons-regular.woff'), url('font/flat-ui-icons-regular.svg');
}

使用after伪元素：使图标显示在按钮左侧；

a::after{

    font-family:'icon-font';

    content:'\e607';

    position:absolute;

    right:85%;

    -webkit-transition:all .5s;

    transition:all .5s;}

为鼠标滑过状态创建相应样式属性：使鼠标滑过图标显示在按钮右侧；

a:hover::after{

    right:5%;}

总结：以上例子将连接修饰伪按钮形状，然后设置了文字和背景渐变，又使用了图标修饰连接的文字，使鼠标移上去，文字和背景颜色渐变，然后图标从左侧滑过右侧；