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

王小优
王小优
王小优
231
文章
0
评论
2015年11月8日
评论
3,960 1648字阅读5分29秒

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

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

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

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

实际上就是写出HTML标签,定义CSS3扫光动画,然后将动画配置到标签即可,下面贴出完整代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>CSS3制作类似雷达扫光效果</title>
  6. <style type="text/css">
  7. .btn{
  8. width: 110px;
  9. height: 40px;
  10. line-height: 40px;
  11. background: #fb5a02;
  12. text-align: center;
  13. border-radius: 5px;
  14. overflow: hidden;
  15. margin: 100px auto;
  16. position: relative;
  17. }
  18. .sweep-light{
  19. position: absolute;
  20. left: 0;
  21. right: 20px;
  22. top: 0;
  23. bottom: 0;
  24. margin: auto;
  25. pointer-events: none;
  26. background-color: rgba(255,255,255,.4);
  27. -webkit-border-radius: 100%;
  28. -moz-border-radius: 100%;
  29. -o-border-radius: 100%;
  30. -ms-border-radius: 100%;
  31. border-radius: 100%;
  32. -webkit-animation-fill-mode: both;
  33. -moz-animation-fill-mode: both;
  34. -ms-animation-fill-mode: both;
  35. -o-animation-fill-mode: both;
  36. animation-fill-mode: both;
  37. display: inline-block;
  38. width: 100px;
  39. height: 100px;
  40. -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
  41. -moz-animation: ball-scale 1s 0s ease-in-out infinite;
  42. -ms-animation: ball-scale 1s 0s ease-in-out infinite;
  43. -o-animation: ball-scale 1s 0s ease-in-out infinite;
  44. animation: ball-scale 1s 0s ease-in-out infinite;
  45. }
  46. @-webkit-keyframes ball-scale {
  47. 0% {
  48. -webkit-transform: scale(0);
  49. transform: scale(0)
  50. }
  51. 100% {
  52. -webkit-transform: scale(1);
  53. transform: scale(1);
  54. opacity: 0
  55. }
  56. }
  57. @keyframes ball-scale {
  58. 0% {
  59. -webkit-transform: scale(0);
  60. transform: scale(0)
  61. }
  62. 100% {
  63. -webkit-transform: scale(1);
  64. transform: scale(1);
  65. opacity: 0
  66. }
  67. }
  68. </style>
  69. </head>
  70. <body>
  71. <div class="btn">
  72. <div class="sweep-light"></div>
  73. </div>
  74. </body>
  75. </html>

大家快去试试吧!

若文章图片、下载链接等信息出错,请在评论区留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
利用animation动画实现呼吸灯效果 CSS3

利用animation动画实现呼吸灯效果

阿里云看到其Banner上的一个呼吸灯效果,利用animation来实现的动画效果。 在阿里云看到其Banner上的一个呼吸灯效果,感觉非常具有科技感,看了下源码,原来只是一个CSS3效果,利用ani...
纯CSS制作像素风史蒂芬·乔布斯 CSS

纯CSS制作像素风史蒂芬·乔布斯

都知道CSS3很强大,但你见过用几个标签加上纯CSS做的画么?下面就让我们看下用纯CSS画出来的乔布斯,太牛了! 先让我们看一下效果,虽然是像素风小人,但我们似乎还是能从人物的轮廓中隐约看出来这是苹果...
利用CSS3制作跳动音乐频谱跳动效果 CSS3

利用CSS3制作跳动音乐频谱跳动效果

CSS3新增很多实用的属性,特别是可以实现动画效果的animation属性,本文通过使用CSS3来实现一个类似于音乐频谱跳动效果。 在一个网站上看到“直播中”的提示标题,有趣的是文字之前有一个图表,是...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: