css3动画与动效
1.按钮元素动画效果
例:鼠标移到链接上从白色慢慢过渡到黑色-----运用transition:all .5s;当超链接元素中任何属性发生变化,都以动画形式呈现,动画的时间为0.5s;
样式:
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%;}
总结:以上例子将连接修饰伪按钮形状,然后设置了文字和背景渐变,又使用了图标修饰连接的文字,使鼠标移上去,文字和背景颜色渐变,然后图标从左侧滑过右侧;