本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > css >

收藏
分享到

CSS3模拟实现一个雷达探测扫描动画特效

css 来源：互联网 作者：佚名 发布时间：2025-02-21 22:00:25 人浏览
摘要

之前好长时间住在唐家岭，从路口往上地走的时候，总能看见一个一个的雷达，好壮观，今天用CSS3实现一个雷达探测扫描的效果。 1. 实现思路 实现思路 包含夜色背景，其实就是为了好看，也

之前好长时间住在唐家岭，从路口往上地走的时候，总能看见一个一个的雷达，好壮观，今天用CSS3实现一个雷达探测扫描的效果。

1. 实现思路

实现思路

包含夜色背景，其实就是为了好看，也是为了真实，好像有种真实的效果；

包含蜘蛛网盘，又像一个靶子；

实现扫描体的转动效果，而且扫描体会带有阴影尾巴，更加真实；

以及被扫描出的亮点儿。

2. HTML部分的实现

HTML部分，包含页面背景，包含多层蜘蛛王盘，包含转动元素，包含扫描结果，猛地一看元素非常多，但在页面性能优化中，HTML标签元素的多少，也会被评定为一个标准，所以我们只添加一个DIV元素，尽量多的都用CSS3来实现

1

2

3

<body>

<div class="tangjialing"></div>

</body>

3. 背景的效果

背景的效果为了体现出网格的状态，采用了background-image的复合属性，而属性值的linear-gradient保证了横线和纵线的展示

4.  蜘蛛网盘的效果

蜘蛛网盘其实可以做成多个DIV嵌套，然后分别设置其border-radius属性为50%，然后一层比一层小即可。然后再横向和纵向分别添加一个边框，但这样会造成HTML元素的增多，所以我们采用了radial-gradient背景色值的填充，而正是这一复合属性，追加的越多，就越有效果

5. 扫描转动效果

扫描转动效果使用了我们熟知的animation 属性，而动画中重点在于从0度一直转动到360度这个过程

1

2

3

4

5

6

7

8

@keyframes zhuan {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

 同时在转动的时候，会有一个尾巴阴影效果，随着转动而转动

1

background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00bb22 100%);

 

6.  被扫描到的光点儿

我们看这个动画效果，是在扫描体经过后，才闪动出现的，而且还会自动闪烁消失，这里采用opacity属性的动画来模拟闪烁过程，同时使用radial-gradient的复合背景属性设置光点儿的个数，位置等

1

background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);

7. 完整源代码

下面，把完整源代码给出来，需要的小伙伴可以自行复制粘贴到自己的HTML中去哦

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>CSS3实现雷达扫描特效</title>

        <style>

            * {

  box-sizing: border-box;

}

html {

  height: 100%;

  background-color: #380d0d;

  font-size: 10px;

}

body {

  background-image: linear-gradient(0deg, transparent 24%, rgba(32, 255, 77, 0.15) 25%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 75%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(32, 255, 77, 0.15) 25%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 75%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent);

  background-size: 7rem 7rem;

  background-position: -5.2rem -5.2rem;

  width: 100%;

  height: 100%;

  position: relative;

  padding: 0;

  margin: 0;

  font-size: 1.6rem;

}

.tangjialing {

  background: -webkit-radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);

  background: radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);

  width: 75vw;

  height: 75vw;

  max-height: 75vh;

  max-width: 75vh;

  position: relative;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  border: 0.2rem solid #0cdd36;;

  overflow: hidden;

}

.tangjialing:before {

  content: ' ';

  display: block;

  position: absolute;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  animation: bei 5s infinite;

  animation-timing-function: linear;

  animation-delay: 1.4s;

}

.tangjialing:after {

  content: ' ';

  display: block;

  background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00bb22 100%);

  width: 50%;

  height: 50%;

  position: absolute;

  top: 0;

  left: 0;

  animation: zhuan 5s infinite;

  animation-timing-function: linear;

  transform-origin: bottom right;

  border-radius: 100% 0 0 0;

}

@keyframes zhuan {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

@keyframes bei {

  14% {

    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);

  }

  14.0002% {

    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);

  }

  25% {

    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);

  }

  26% {

    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);

    opacity: 1;

  }

  100% {

    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);

    opacity: 0;

  }

}

        </style>

</head>

<body>

<div class="tangjialing"></div>

</body></html>

8. 最后

最后，希望这个雷达扫描效果，可以给你抛砖引玉，实现更多的需求效果。
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章

  • CSS实现高频出现的复杂怪状按钮之镂空的内凹圆

    CSS实现高频出现的复杂怪状按钮之镂空的内凹圆
    你可以在这里看到：CodePen Demo -- CSS Various Button Shapes | CSS 各种造型按钮 接下来几篇文章中，将在上述基础上，额外补充一些在日常设计稿中
  • CSS3实现动态旋转加载样式的代码
    要使用 CSS3 创建一个动态旋转加载样式，可以使用 CSS 动画和旋转变换。下面是一个简单的示例： HTML： 1 div class=loader/div CSS： 1 2 3 4 5 6 7
  • CSS3动态效果之过渡属性介绍
    过渡CSS3动态效果 过渡属性 一、什么是过渡： 通过 css3 可以在不使用 flash 动画或 javascript 的情况下，为元素从一种样式变换为另一种样式时

  • css3 实现icon刷新转动效果的代码

    css3 实现icon刷新转动效果的代码
    先了解一下-webkit-transform、animation、@keyframes这三个属性吧 -webkit-transform可以实现平移、旋转、缩放和倾斜等效果 有以下几个属性 translate(x
  • css3 display:flex 弹性盒模型的使用方法
    CSS3 中的display: flex是一种强大的布局模式，被称为弹性盒布局或Flexbox。它允许我们通过一套简洁的规则，轻松地对网页元素进行对齐、排列

  • CSS3模拟实现一个雷达探测扫描动画特效

    CSS3模拟实现一个雷达探测扫描动画特效
    之前好长时间住在唐家岭，从路口往上地走的时候，总能看见一个一个的雷达，好壮观，今天用CSS3实现一个雷达探测扫描的效果。 1. 实现思

  • css实现渐变色圆角边框

    css实现渐变色圆角边框
    渐变色圆角边框(内容区域圆角) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 !DOCTYPE html html lang=en head meta charset=UTF-8 t

  • css渐变色背景gradient的介绍

    css渐变色背景gradient的介绍
    使用渐变色作为背景 可以直接将渐变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背景background一个属性值不是背景颜色

  • CSS3中使用flex和grid实现等高元素布局的代码

    CSS3中使用flex和grid实现等高元素布局的代码
    一、简单的两列实现 1、先看页面效果 2、css代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .container { padding: 10px; width: 100ch; margin: 0 auto; box-shadow: i

  • css grid网格布局(栅格布局)的代码

    css grid网格布局(栅格布局)的代码
    CSS中gap并不是新的属性，在CSS3新特性中多列布局为其添加了一个新能力。间隙属性除了运用在CSS栅格之外，CSS3新特性中弹性布局同样可以使
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计