css3

transform让背景图标旋转360度

a b {display: inline-block;width: 14px;height: 14px;background: url(/img/button_img.png) -1px -1px no-repeat;

a:hover b {-moz-transform: rotate(360deg); -webkit-transform:rotate(360deg);transform: rotate(360deg);}

 

transition过渡是元素从一种样式逐渐改变为另一种的效果

/*鼠标指针位于元素上宽度300px,鼠标指针移开元素时宽度100px，由于加了'transition:width 2s'宽度变化效果是逐渐的*/

div{width:100px;height:100px;background:yellow;transition:width 2s;}

div:hover{width:300px;}  

 

animation创建动画效果

div{width:100px;height:100px;background:red;animation:myfirst 5s;}

@keyframes myfirst{from {background:red;}to {background:yellow;}}