纯CSS3绿色圆形扫描雷达
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="fly fly1"></div>
<div class="fly fly2"></div>
<div class="fly fly3"></div>
<div id="earth">
<div class="radar">
<div class="circle">
<div class="h"></div>
<div class="v"></div>
<div class="scan"></div>
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
</div>
<div class="icon">
<div class="hotspot"></div>
</div>
</div>
</div>
<!-- by 戈饭 -->
<style type="text/css">
/*CSS源代码*/
html,body{
margin:0;
padding: 0;
height: 100%;
background:#F0743E;
}
body {
position: relative;
overflow:hidden;
-webkit-perspective: 450px;
-moz-perspective: 450px;
-ms-perspective: 450px;
perspective: 450px;
perspective-origin: 50% 50%;
}
#sky {
width:100%;
height: 50%;
background:#F0743E;
}
.fly{
position: fixed;
top:0;
margin: auto;
width: 150px;
height: 233px;
background: url("http://sandbox.runjs.cn/uploads/rs/125/lyhpncuv/1.png") no-repeat center / cover;
animation: fly 3s ease-in-out infinite;
-webkit-animation: fly 3s ease-in-out infinite;
}
.fly1 {
left: 0;
right: 0;
}
.fly2 {
left: -200px;
}
.fly3 {
right: -200px;
}
#earth {
position: absolute;
left: -50%;
bottom: -15%;
margin: auto;
width: 200%;
height: 100%;
background:#000;
-webkit-transform: rotateX(45deg);
-moz-transform: rotateX(45deg);
-ms-transform: rotateX(45deg);
-o-transform: rotateX(45deg);
transform: rotateX(45deg);
border-radius:50% 50% 0 0;
}
.radar {
width: 100%;
height: 100%;
position: relative;
}
.circle {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
width: 300px;
height: 300px;
border-radius:50%;
background:-moz-repeating-radial-gradient(#00A638 3%,#000 5%,#000 25%);
background:-webkit-repeating-radial-gradient(#00A638 3%,#000 5%,#000 25%);
background:repeating-radial-gradient(#00A638 3%,#000 5%,#000 25%);
}
.h,.v {
position: absolute;
}
.h {
top: 149px;
height:2px;
width: 100%;
background: #00a638;
}
.v {
left: 149px;
width: 2px;
height: 100%;
background:#00a638
}
.scan {
width: 150px;
height: 150px;
background:linear-gradient(0deg,rgba(115, 255, 162, 0.0),rgba(0, 166, 56, 0.75));
border-radius:100% 0 0 0;
animation: scan 4s linear infinite;
-webkit-animation: scan 4s linear infinite;
border-right:3px solid rgba(0, 255, 86, 0.5);
z-index:999;
}
.dot {
position: absolute;
top:20px;
left: 20px;
width: 7px;
height: 7px;
border-radius:50%;
box-shadow:0 0 5px 3px #00FF56;
opacity: 0;
background: #C3FFD3;
}
.dot1 {
top: 75px;
left: 75px;
animation: flash 4s linear infinite 3.5s;
-webkit-animation: flash 4s linear infinite 3.5s;
}
.dot2 {
top: 150px;
left: 250px;
animation: flash 4s linear infinite 1s;
-webkit-animation: flash 4s linear infinite 1s;
}
.dot3 {
top: 250px;
left: 250px;
animation: flash 4s linear infinite 1.5s;
-webkit-animation: flash 4s linear infinite 1.5s;
}
.dot4 {
top: 60px;
left: 230px;
animation: flash 4s linear infinite 0.5s;
-webkit-animation: flash 4s linear infinite 0.5s;
}
.icon {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 25px;
margin: auto;
width:30px;
height:30px;
opacity:0.7;
animation: jump 1s linear infinite;
-webkit-animation: jump 1s linear infinite;
}
.hotspot {
width: 0;
height: 0;
border-style:solid;
border-color:#00FF56 transparent transparent transparent;
border-width:30px 15px 15px 15px;
}
.hotspot::before {
content:'';
position: absolute;
width:30px;
height:25px;
top:-15px;
left:0;
background:#00FF56;
border-radius: 50%
}
.hotspot::after {
content:'';
position: absolute;
width: 16px;
height: 16px;
top:-10px;
left:7px;
background:#000;
border-radius: 50%
}
@keyframes scan {
0% {
transform:rotateZ(0deg);
transform-origin:150px 150px;
}
100% {
transform:rotateZ(360deg);
transform-origin:150px 150px;
}
}
@-webkit-keyframes scan {
0% {
transform:rotateZ(0deg);
transform-origin:150px 150px;
}
100% {
transform:rotateZ(360deg);
transform-origin:150px 150px;
}
}
@keyframes flash {
0% {
opacity:0;
}
10% {
opacity:1;
}
30% {
opacity:0;
}
}
@-webkit-keyframes flash {
0% {
opacity:0;
}
10% {
opacity:1;
}
30% {
opacity:0;
}
}
@keyframes jump {
0% {
transform:tranlateY(-10px);
}
50% {
transform:translateY(-15px);
}
}
@-webkit-keyframes jump {
0% {
transform:tranlateY(-10px);
}
50% {
transform:translateY(-15px);
}
}
@keyframes fly {
0% {
transform:translateZ(-1350px) rotateX(-45deg);
}
100% {
transform:translateZ(1350px) rotateX(-90deg);
}
}
@-webkit-keyframes fly {
0% {
transform:translateZ(-1350px) rotateX(-45deg);
}
100% {
transform:translateZ(1350px) rotateX(-90deg);
}
}
</style>
</body>
</html>
/*CSS源代码*/
body{
background:#CFCFCF;
}
.
相关推荐
【纯CSS3雷达扫描模拟动画】是一种利用现代Web技术实现的动态效果，它不依赖JavaScript，完全基于CSS3属性和技巧来创建一个类似雷达探测的动画效果。这种动画在网页设计中可以用于增加互动性和视觉吸引力，比如在...
【CSS3雷达扫描动态图】是一个使用纯CSS3技术实现的网页特效，它展示了如何通过CSS3的关键帧动画（@keyframes）来创建一个模仿雷达扫描的动态效果。这个效果通常用于增强网页的互动性和视觉吸引力，比如在游戏界面、...
本教程将详细解析如何利用CSS3来实现一个逼真的雷达扫描动画效果，就像标题所描述的那样——"CSS3模拟雷达扫描动画效果"。 首先，我们要了解雷达扫描动画的基本原理。雷达扫描通常表现为一个圆形或椭圆形的光束，自...
在雷达扫描效果的实现中，HTML元素（如`div`）通过CSS3的动画（Animation）和过渡（Transition）特性，模拟出雷达扫描的动态效果。开发者可能使用了`transform`属性来改变元素的位置和旋转角度，配合`animation`属性...
在本文中，我们将深入探讨如何使用CSS3来创建一个引人入胜的雷达扫描动画特效。CSS3（层叠样式表第三版）是Web设计领域的一个强大工具，它提供了丰富的样式控制和动态效果，让我们无需JavaScript或其他编程语言就能...
【CSS3科技雷达扫描动画特效】是利用现代Web开发中的CSS3技术实现的一种创新视觉效果。这个特效将传统的雷达扫描概念与卡通元素相结合，为网页或应用增添了一种科技感和动态美感。在Web设计中，这样的动画效果可以...
在描述中提到，雷达扫描的痕迹清晰可见，这表明开发者使用了Canvas的路径(path)和线条(line)绘制功能，可能结合了arc()方法来创建圆形雷达扫描轨迹，stroke()函数则用于描绘路径。雷达扫描的动态效果可能是通过...
1. **PathGeometry**：用于创建雷达扫描的轨迹形状，可以是圆形或者扇形，通过定义不同的PathFigure和Segment来构建。 2. **Storyboard**：WPF的动画系统核心，用于定义动画的时间线，控制雷达扫描的动画效果，如...
3. 创建一个函数来更新动画，包括清除Canvas（clearRect），绘制雷达扫描线（arc或lineTo），并根据扫描角度移动雷达。 4. 使用setInterval或requestAnimationFrame来定期调用更新动画的函数，以产生连续的运动效果...
【CSS3雷达波向外散发动画效果特效代码】 在网页设计中，动态效果往往能吸引用户的注意力并提升用户体验。CSS3作为现代Web设计的核心技术之一，提供了丰富的样式和动画功能，使得无需JavaScript即可创建出复杂且...
在这个雷达动画中，开发者可能使用了`arc()`来绘制雷达扫描的圆形轨迹。 2. **JavaScript基础**：JavaScript是实现这个动画的关键，负责处理动画的逻辑和时间帧。通过设置定时器（如`requestAnimationFrame()`），...
在本文中，我们将深入探讨如何使用CSS3来创建一个引人入胜的雷达扫描动态图特效。CSS3，即层叠样式表第三版，是Web设计领域中的一个重要工具，它为网页开发者提供了丰富的样式和动画功能，使得网页设计更加动态且...
雷达扫描通常表现为一个中心点向外扩散的圆形轨迹，随着扫描的进行，覆盖的区域逐渐扩大，同时可能伴随着特定的动画效果，如线的绘制、填充或颜色变化。在jQuery中，我们可以借助CSS3的动画属性和JavaScript的定时器...
3. **路径动画**：沿着雷达图的边缘移动一个指示器，模拟扫描过程。 4. **交互反馈**：当扫描到数据点时，提供视觉或声音反馈。 在实际项目中，可以结合现代前端框架（如React、Vue等）和库（如D3.js、Chart.js等）...
在这个雷达扫描特效中，`arc()`函数将被用来绘制圆形的雷达边框和扫描线。 2. **动画原理**: 动画是通过连续绘制一系列帧来实现的。在雷达扫描特效中，这可能涉及到定时器（如`requestAnimationFrame()`）来周期性...
3. **绘制雷达背景**：使用`context`对象的绘图方法，如`arc()`和`fillRect()`，绘制雷达的基本形状，通常是圆形或椭圆形，以及可能的背景图案。 4. **实现扫描光环**：使用`context.clearRect()`清除指定区域，...
在网页设计中，Canvas元素是HTML5引入的一个强大的特性，它允许开发者在浏览器上...通过这个雷达扫描特效，你可以掌握Canvas的基本用法，理解动画原理，并了解如何将jQuery和CSS与Canvas相结合，提升网页的视觉表现力。
此外，`js`文件夹很可能包含了实现这些功能的JavaScript代码，而`css`文件夹则可能有CSS样式表，用于控制页面布局和元素样式，例如设置地图容器的大小，或者雷达扫描动画的过渡效果。 对于初学者来说，研究这个项目...