标签归档:雷达

HTML5/CSS3 3D雷达扫描动画

之前我们分享过一款纯CSS3雷达扫描模拟动画,看起来十分炫酷。这次我们分享的另外一款雷达动画更加让人震撼,它是基于HTML5和CSS3实现,它的一大特点是3D立体的视觉效果,鼠标点击雷达后将会展现一张3D立体地图,并且对地图上指定的几个地点进行坐标详细信息描述。

html5-css3-3d-radar-animation

在线演示源码下载

下面我们一起来解析一下这款炫酷的HTML5 3D雷达动画的实现过程。

HTML代码

首先HTML代码非常简单,只需在页面上展示一个div容器即可。

<div class="radar"></div>

CSS代码

这里主要利用了CSS3的旋转等动画特性,看看以下的CSS代码,主要是完成所有的动画:

@-webkit-keyframes flashing {
  0%,
  30% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  70%,
  100% {
    -webkit-transform: scale(0);
            tr[......]

阅读全文>>