<style type="text/css"> a.btn{ background: #60cb1b; font-size: 16px; padding:10px 15px; color:#fff; text-align: center; text-decoration:none; font-weight:bold; text-shadow:0 -1px 1px rgba(0,0,0,0.3); border-radius:5px; box-shadow:0 0 5px rgba(255,255,255,0.6) inset,0 0 3px rgba(220,120,220,0.8); animation-name:buttonLight; animation-duration:5s; animation-iteration-count:infinite; } @keyframes buttonLight{ from{ background: rgba(96,203,27,0.5); box-shadow:0 0 5px rgba(255,255,255,0.3) inset,0 0 3px rgba(220,120,200,0.5); color:red; } 25%{ background:rgba(196,203,27,0.8); box-shadow:0 0 10px rgba(255,255,255,0.5) inset,0 0 8px rgba(120,120,200,0.8); color:blue; } 50%{ background: rgba(196,203,127,1); box-shadow:0 0 5px rgba(155,255,255,0.3) inset,0 0 3px rgba(220,120,100,1); color:orange; } 75%{ background: rgba(196,203,27,0.8); box-shadow:0 0 10px rgba(255,155,255,0.5) inset,0 0 8px rgba(120,120,200,0.8); color:black; } to{ background: rgba(96,203,27,0.5); box-shadow:0 0 5px rgba(255,255,255,0.3) inset,0 0 3px rgba(220,120,200,0.5); color:green; } } </style> <a href="" class="btn">发光的按钮</a>
<style> div{ margin:100px auto; } a.box{ display: block; width:50px; height:50px; background:red; margin-bottom:20px; animation-name:round; animation-duration:5s; animation-timing-function:ease; animation-iteration-count:infinite; } @keyframes round{ from{ border-radius: 0px; background: red; } 50%{ border-radius: 25px; background: green; } to{ border-radius: 0px; background: red; } } </style> <div> <a href="#" class="box"></a> <span class="click-btn">click</span> </div>
<style> a.box{ display: block; width:50px; height:50px; background:red; margin-bottom:20px; } a.round{ border-radius:25px; background: green; animation-name:round; animation-duration:5s; animation-timing-function:ease; animation-iteration-count:infinite; } @keyframes round{ from{ border-radius: 0px; background: red; } 50%{ border-radius: 25px; background: green; } to{ border-radius: 0px; background: red; } } .click-btn{ background:rgba(125,220,80,0.8); border-radius:5px; box-shadow:inset 0 0 8px rgba(255,255,255,0.8),0 0 10px rgba(10,255,120,0.3); padding:5px 10px; color:#369; font-size: 16px; font-weight: bold; text-align:center; text-shadow: 0 -1px 0 rgba(0,0,0,0.5); cursor: pointer; }</style>
原文:https://www.cnblogs.com/yuyujuan/p/13844978.html