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

这篇具有很好参考价值的文章主要介绍了实用CSS3模拟实现一个雷达扫描动画特效。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

<template>
	<view>
		<view class="leidatu"></view>
	</view>
</template>

<script>
	export default {
		name: 'test'
	}
</script>

<style lang="scss" scoped>
.leidatu {
  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: 500px;
  height: 500px;
  position: relative;
  left: 50%;
  top: 50%;
  // transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid #0cdd36;;
  overflow: hidden;
}
.leidatu: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);
  }
}
 
</style>

实用CSS3模拟实现一个雷达扫描动画特效,css3,css,html

方法二:雷达扫描动画特效(filter阴影效果)

<template>
	<div>
		<div class="loader">
			<span></span>
		</div>
	</div>
</template>

<script>
</script>

<style lang="scss">
	.loader {
		width: 150px;
		height: 150px;
		background: transparent;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		box-shadow: 25px 25px 75px rgba(0,0,0,0.55);
		border-radius: 50%;
		overflow: hidden;
	}
	.loader::before {
		content: "";
		position: absolute;
		inset: 20px;
		background: transparent;
		border: 1px dashed #444;
		border-radius: 50%;
		box-shadow: inset -5px -5px 25px rgba(0,0,0,0.25),inset 5px 5px 35px rgba(0,0,0,0.25)
	}
	.loader::after {
		content: "";
		position: absolute;
		width: 50px;
		height: 50px;
		border: 1px dashed #444;
		border-radius: 50%;
		box-shadow: inset -5px -5px 25px rgba(0,0,0,0.25),inset 5px 5px 35px rgba(0,0,0,0.25)
	}
	.loader span {
		width: 100%;
		height: 100%;
		background: transparent;
		position: absolute;
		top: 50%;
		left: 50%;
		border-top: 1px solid #fff;
		animation: radar 2s linear infinite;
		transform-origin: top left; 
	}
	.loader span::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: seagreen;
		filter: blur(30px) drop-shadow(20px 20px 20px seagreen);
		transform-origin: top left;
		transform: rotate(-55deg);
		border: 1px solid red;
	}
	@keyframes radar {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
</style>

实用CSS3模拟实现一个雷达扫描动画特效,css3,css,html

 文章来源地址https://www.toymoban.com/news/detail-522149.html

到了这里,关于实用CSS3模拟实现一个雷达扫描动画特效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 学习CSS3,模拟春雪漫天飘的动画效果

    清明时节雨纷纷,但有些地方却下起了大雪,今天我们就用所学的 CSS3 知识,模拟一下 夜晚漫天飘雪 的场景吧。 目录 1. 实现思路 2. 部分HTML代码  3. 夜空的背景  4. 雪花的样式  5. 粒子飞升效果  6. HTML完整源代码  7. CSS3完整源代码 8.  最后  1. 实现思路 DIV布局 的使用 整

    2023年04月09日
    浏览(44)
  • 520要来了,CSS3模拟3D旋转节日表白动画特效

    一年一度的520要来了,做为一名CSS3爱好者,怎么能不为大家的技术型表白做出一点贡献呢,这不,用CSS3模拟3D旋转的表白特效来了,快快拿去表白 目录 实现思路  单层3D可见 HTML源代码 CSS3源代码   实现思路  本文通过添加. scene 类,添加 .banner 类,使其双层3D呈现 transform

    2024年02月05日
    浏览(48)
  • 【CSS3】CSS3 动画 ⑤ ( 动画速度曲线 | 设置动画步长 | 动画匀速执行 | 动画分 2 步执行 | 使用动画步长实现打字机效果 )

    CSS3 样式中 , 设置 动画速度曲线 的属性是 animation-timing-function 属性 ; animation-timing-function 属性定义了动画从 初始 CSS 样式 变为 结束状态 时 所消耗的时间 ; animation-timing-function 属性常用 属性值 如下 : linear : 动画在整个执行过程中速度都是匀速的 ; ease : 默认属性值 , 动画首先

    2024年02月13日
    浏览(45)
  • CSS3实现动画加载效果

    2024年02月07日
    浏览(54)
  • CSS3 如何实现飘动的云朵动画

    目录 一、动画的定义 二、动画的基本使用         2.1.-animation-name         2.2.-animation-duration         2.3.-animation-timing-function         2.4.-animation-delay         2.5.-animation-iteration-count                 2.6.-animation-direction         2.7.-animation-fill-mod

    2024年02月08日
    浏览(51)
  • 纯css3实现小鸡从鸡蛋破壳而出动画特效

    实现一个使用纯css3实现小鸡破壳的效果 示例效果如下所示 实现这个小鸡破壳,使用css3,结合动画关键帧就可以实现,结合元素绝对定位,使用 div + css 进行绘制 当鼠标移上去时,实现蛋黄与蛋壳的分离,使用css3中的 transform ,变换,垂直反方向上,平移就可以实现 村民私自搭桥收费被

    2024年02月16日
    浏览(40)
  • 使用css3如何实现一个文字打印效果

    在很多网站首页介绍页里,为了吸引用户,暂留更长时间,使用了一些css3动画的 文字打印.gif 想要实现这个动画,改变元素的宽度,结合动画css3关键帧实现 animation 动画通过设置多个节点来精确控制一个或者一组动画,常用来实现复杂的动画效果; 相对过渡动画, animation 动画可以

    2024年02月16日
    浏览(89)
  • 【css3】涟漪动画

    2024年02月06日
    浏览(40)
  • CSS3 动画

    个人主页: 学习前端的小z 个人专栏: HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论! 在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存

    2024年04月26日
    浏览(53)
  • CSS3 -- @keyframes动画

    CSS动画可以为网站添加生动的交互效果。在CSS3中,@keyframes规则被引入,用于定义CSS动画的关键帧和属性值。@keyframes规则提供了一个非常强大和灵活的工具,允许开发人员控制动画的细节,以创建各种类型的动画效果。在本文中,我们将深入探讨@keyframes规则,了解如何使用它

    2024年02月16日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包