jquery - jqueryを使ったレーダースキャナー効果

Question

jqueryとcssを使用してレーダースキャナー効果を作成する方法について、可能な解決策を見つけようとしています。基本的に、半透明の三角形は div の中点を中心に回転します。これはjqueryで可能ですか、それとも他の手段に頼るべきですか? アニメーション GIF を使用しないことを好みます。

Answer 1

CSS のみのデモ

HTML:

<div id="radar">
    <div class="beacon" id="beacon"></div>
    <div class="beacon" id="beacon-75"></div>
    <div class="beacon" id="beacon-50"></div>
    <div class="beacon" id="beacon-25"></div>
    <div class="circle" id="circle-big"></div>
    <div class="circle" id="circle-medium"></div>
    <div class="circle" id="circle-small"></div>
    <div class="circle" id="dot"></div>
    <div id="vertical"></div>
    <div id="horizontal"></div>
</div>

CSS:

#radar {
    position:relative;
    width:400px;
    height:400px;
    margin:20px auto;
    border:3px solid #0c0;
    background-color:#020;
    border-radius:50%;
}
#radar>* {position:absolute}
.beacon {
    left:50%;
    top:50%;
    border-style:solid;
    border-width:8px 200px 8px 0;
    border-color:transparent;
    margin-top:-8px;
    transform-origin:0 50%;
}
#beacon {border-right-color:#0c0;animation:spin 2s 0s linear infinite}
#beacon-75 {border-right-color:rgba(0,204,0,0.75);animation:spin 2s 0.03s linear infinite}
#beacon-50 {border-right-color:rgba(0,204,0,0.5);animation:spin 2s 0.06s linear infinite}
#beacon-25 {border-right-color:rgba(0,204,0,0.25);animation:spin 2s 0.09s linear infinite}
.circle {
    left:50%;
    top:50%;
    border:1px solid #0c0;
    border-radius:50%;
}
#circle-big {
    width:300px;
    height:300px;
    margin:-150px;
}
#circle-medium {
    width:200px;
    height:200px;
    margin:-100px;
}
#circle-small {
    width:100px;
    height:100px;
    margin:-50px;
}
#dot {
    width:8px;
    height:8px;
    margin:-4px;
    background-color:#0c0;
}
#vertical {
    left:50%;
    top:0;
    bottom:0;
    border-left:1px solid #0c0;
}
#horizontal {
    top:50%;
    left:0;
    right:0;
    border-top:1px solid #0c0;
}

@keyframes spin {
    from {transform:rotate(0)}
    to {transform:rotate(360deg)}
}

一部のブラウザーをサポートするには、ベンダー プレフィックスを追加する必要がありますが、これだけで IE10 と Firefox で動作します。