版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/caiyongshengCSDN/article/details/79397474
附图:
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; } }