分享一套漂亮的不同背景颜色按钮,鼠标悬浮上面,有过渡延迟发光效果,完全通过css3属性,不依赖jQuery插件。
引入按钮样式playground.css
<link href="playground.css" media="all" rel="stylesheet" type="text/css" />
定义不同背景颜色按钮css3过渡效果
.green.button{-webkit-animation-name: greenPulse; -webkit-animation-duration: 3s;} .blue.button{-webkit-animation-name: bluePulse; -webkit-animation-duration: 4s;} .red.button{-webkit-animation-name: redPulse; -webkit-animation-duration: 1s;} .magenta.button{-webkit-animation-name: magentaPulse; -webkit-animation-duration: 2s;} .orange.button{-webkit-animation-name: orangePulse; -webkit-animation-duration: 3s;} .orangellow.button{-webkit-animation-name: orangellowPulse; -webkit-animation-duration: 5s;}
HTML
<a class="large green button">Look at me!</a> <a class="large blue button">Click me!</a> <a class="large magenta button">Hi ho, Silver!</a> <a class="large green button">Look at me!</a> <a class="large red button">I'm Glowing!</a> <a class="large magenta button">Hi ho, Silver!</a>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791