附图：
1.html
<div class="radius"> <span class="animate-radius"></span> 888</div>
2.css
.radius{width: 100px; height: 100px; margin: 100px auto; border-radius: 50%; text-align: center; color: #fff; background-color: #ff8533; position: relative;}.animate-radius{width: 100px; height: 100px; position: absolute; left: 0; border-radius: 50%; background-color: #ff8533; animation:radius 1.5s ease-out infinite forwards; -webkit-animation: radius 1.5s ease-out infinite forwards; -moz-animation:radius 1.5s ease-out infinite forwards; -ms-animation:radius 1.5s ease-out infinite forwards;}@keyframes radius {0%{ transform: scale(1,1); -webkit-transform:scale(1,1) ; -moz-transform:scale(1,1) ; -ms-transform:scale(1,1) ; opacity: 0.6; }50%{transform: scale(1.4,1.4); -webkit-transform:scale(1.4,1.4) ; -moz-transform:scale(1.4,1.4) ; -ms-transform:scale(1.4,1.4) ; opacity: 0; }}@-webkit-keyframes radius {0%{transform: scale(1,1); -webkit-transform:scale(1,1) ; -moz-transform:scale(1,1) ; -ms-transform:scale(1,1) ; opacity: 0.6; }100%{transform: scale(1.4,1.4); -webkit-transform:scale(1.4,1.4) ; -moz-transform:scale(1.4,1.4) ; -ms-transform:scale(1.4,1.4) ; opacity: 0; }}@-moz-keyframes radius {0%{ transform: scale(1,1); -webkit-transform:scale(1,1) ; -moz-transform:scale(1,1) ; -ms-transform:scale(1,1) ; opacity: 0.6; }50%{transform: scale(1.4,1.4); -webkit-transform:scale(1.4,1.4) ; -moz-transform:scale(1.4,1.4) ; -ms-transform:scale(1.4,1.4) ; opacity: 0; }}@-ms-keyframes radius {0%{ transform: scale(1,1); -webkit-transform:scale(1,1) ; -moz-transform:scale(1,1) ; -ms-transform:scale(1,1) ; opacity: 0.6; }50%{transform: scale(1.4,1.4); -webkit-transform:scale(1.4,1.4) ; -moz-transform:scale(1.4,1.4) ; -ms-transform:scale(1.4,1.4) ; opacity: 0; }}
