实例代码:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> *{margin: 0; padding: 0;} .container{ margin: 0 auto; padding-top: 30px; width: 1000px; } .btn{ display: inline-block; padding: 0 30px; width: auto; height: 35px; font: 14px/35px 'microsoft yahei'; color: #fff; border: 0; border-radius: 3px; text-align: center; cursor: pointer; /*实现渐变(时间变化效果)*/ -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .bluebtn{ background: #5dcbff; } /*蓝色按钮*/ .bluebtn:hover{ background: #40b6ee; } .orangebtn{ background: #ff5700; }/*橙色按钮*/ .orangebtn:hover{ background: #e25d18; } .violetbtn{ background: #6680ff; }/*紫色按钮*/ .violetbtn:hover{ background: #425de0; } .graybtn{ background: #999; }/*灰色按钮*/ .graybtn:hover{ background: #7f7f7f; } </style> </head> <body> <div class="container"> <span class="btn bluebtn">蓝色按钮</span> <span class="btn orangebtn">橙色按钮</span> <span class="btn violetbtn">紫色按钮</span> <span class="btn graybtn">灰色按钮</span> </div> </body> </html>
同理可应用在超链接、按钮等中
如对本文有疑问, 点击进行留言回复!!
css深入剖析transform的translate和perspective
HCIE第四天总结(典型组网之一:CSS+Eth-Trunk+iStack)
了解下Apache Elasticsearch 和 Kibana
网友评论