现在css3已经强大到不得不学了，对我这个对css没什么专研的人来说，任何一个css做出来的炫效果都是值得我兴奋一天的。
今天用css3的动画和圆角弄了一个个人觉得比较帅的效果，不仅仅是效果帅，跟主要的是实现方式实在是太简单了。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>css3漂亮按钮</title> <style> .round{ display: block; width:30px; height:30px; background-color:rgba(249, 13, 20, .75); white-space: nowrap; /*保证不换行*/ -webkit-transition: all .25s ease-in-out } .round:hover { width:230px; background-color:rgba(249, 13, 20, .9); } </style> </head> <body> <a class="round">测试a标签</a> </body> </html>
原理很简单，主要是-webkit-transition: all .25s ease-in-out为属性改变添加了动画，从而得到不错的效果。
当然，既然是css3，我们怎能放过圆角：
border-radius: 15px;
文字此时太靠左，高度也不对，加上indent和line-height ：
line-height: 30px;
text-indent: 35px;这下好看多了：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>css3漂亮按钮</title> <style> .round{ display: block; width:30px; height:30px; background-color:rgba(249, 13, 20, .75); white-space: nowrap; /*保证不换行*/ -webkit-transition: all .25s ease-in-out; border-radius: 15px; line-height: 30px; text-indent: 35px; } .round:hover { width:230px; background-color:rgba(249, 13, 20, .9); } </style> </head> <body> <a class="round">测试a标签</a> </body> </html>