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

2017-10-11 11:03 来自本站原创 7,274 1 3
[摘要]

如今的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>

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助微信扫一扫赞助

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 声明:凡注明“本站原创”的所有文字图片等资料,版权均属 雅兮网 所有,欢迎转载,但务请注明出处;
    目前评论:1   其中:访客  1   博主  0
    加载中...
    1. 10个月前 (10-17) 沙发

      效果不错啊,博主会玩!

    发表评论

    疑问 调皮 难过 抠鼻 吓 微笑 可爱 坏笑 惊讶 发呆 疑问 大兵 偷笑 咒骂 发怒 白眼 鼓掌 得意 擦汗 亲亲 大哭 呲牙 晕 强

    1 3 7,274
    Top