用CSS3给按钮添加类似雷达扫光效果

2017-10-11 11:03 来自本站原创 13,779 1 5

[摘要]

如今的Web前端技术层出不穷，大家所看的网页也从原来的简单刻板的风格逐步演变为绚丽多特效的“现代化”效果了，今 […]

如今的Web前端技术层出不穷，大家所看的网页也从原来的简单刻板的风格逐步演变为绚丽多特效的“现代化”效果了，今天就用CSS3给一个按钮添加类似雷达扫光的效果。

用CSS3给按钮添加类似雷达扫光效果

首先看下效果:DEMO

这种效果可以让某些按钮更加引人注目，例如“在线客服”“在线咨询”等按钮，当然了也有很多别的用途，在此不赘述。

实际上就是写出html标签，定义CSS3扫光动画，然后将动画配置到标签即可，下面贴出代码：

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>CSS3制作类似雷达扫光效果</title>
 <style type="text/css">
 .btn{
 width: 110px;
 height: 40px;
 line-height: 40px;
 background: #fb5a02;
 text-align: center;
 border-radius: 5px;
 overflow: hidden;
 margin: 100px auto;
 position: relative;
 }
 .sweep-light{
 position: absolute;
 left: 0;
 right: 20px;
 top: 0;
 bottom: 0;
 margin: auto;
 pointer-events: none;
 background-color: rgba(255,255,255,.4);
 -webkit-border-radius: 100%;
 -moz-border-radius: 100%;
 -o-border-radius: 100%;
 -ms-border-radius: 100%;
 border-radius: 100%;
 -webkit-animation-fill-mode: both;
 -moz-animation-fill-mode: both;
 -ms-animation-fill-mode: both;
 -o-animation-fill-mode: both;
 animation-fill-mode: both;
 display: inline-block;
 width: 100px;
 height: 100px;
 -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
 -moz-animation: ball-scale 1s 0s ease-in-out infinite;
 -ms-animation: ball-scale 1s 0s ease-in-out infinite;
 -o-animation: ball-scale 1s 0s ease-in-out infinite;
 animation: ball-scale 1s 0s ease-in-out infinite;
 }
 @-webkit-keyframes ball-scale {
 0% {
 -webkit-transform: scale(0);
 transform: scale(0)
 }
 100% {
 -webkit-transform: scale(1);
 transform: scale(1);
 opacity: 0
 }
 }
 @keyframes ball-scale {
 0% {
 -webkit-transform: scale(0);
 transform: scale(0)
 }
 100% {
 -webkit-transform: scale(1);
 transform: scale(1);
 opacity: 0
 }
 }
 </style>
 </head>
 <body>
 <div class="btn">
 <div class="sweep-light"></div>
 </div>
 </body>
 </html>

本文最后更新于2017年10月11日，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！