简单脉冲动画效果实现

embedded/2024/9/23 14:36:31/

简单脉冲动画效果实现

效果展示

在这里插入图片描述

CSS 知识点

  • CSS 变量的灵活使用
  • CSS 动画使用

页面整体结构实现

<div class="pulse"><span style="css language-css">--i: 1"></span><span style="css language-css">--i: 2"></span><span style="css language-css">--i: 3"></span><span style="css language-css">--i: 4"></span><span style="css language-css">--i: 5"></span><span style="css language-css">--i: 6"></span>
</div>

实现整体布局

css">.pulse {position: relative;width: 200px;height: 200px;box-shadow: inset 0 0 40px #12b9ff, 0 0 50px #12b9ff;border-radius: 50%;border: 1px solid #12b9ff;background: url(./earch.jpg);background-size: cover;
}.pulse span {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: transparent;border: 1px solid #12b9ff;border-radius: 50%;
}

使用CSS变量和动画实现脉冲效果

css">.pulse span {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: transparent;border: 1px solid #12b9ff;animation: animate 6s linear infinite;border-radius: 50%;animation-delay: calc(var(--i) * -1s);
}@keyframes animate {0%{width: 200px;height: 200px;opacity: 1;}50% {opacity: 1;}100% {width: 600px;height: 600px;opacity: 0;}
}

实现地球运动效果

css">.pulse {position: relative;width: 200px;height: 200px;box-shadow: inset 0 0 40px #12b9ff, 0 0 50px #12b9ff;border-radius: 50%;border: 1px solid #12b9ff;background: url(./earch.jpg);background-size: cover;animation: animateEarth 30s linear infinite;
}@keyframes animateEarth {0% {background-position-x: 0px;}100% {background-position-x: 2400px;}
}

完整代码下载

完整代码下载


http://www.ppmy.cn/embedded/47384.html

相关文章

CVE-2012-2122-mysql未授权访问漏洞复现-vulhub

1.原理 参考&#xff1a;CVE-2012-2122 Mysql身份认证漏洞及利用-CSDN博客 简单来说&#xff0c;除了配置上的问题以外&#xff0c;是密码的验证出现了漏洞&#xff0c;导致尝试次数多了之后直接可以登入 使用&#xff1a;kalivulhub 2.复现 开一下镜像&#xff0c;用的是v…

websocket发送数据

1. 使用JSON格式传输参数 可以使用库如Jackson或Gson来处理JSON。 客户端发送JSON消息&#xff1a; var socket new WebSocket("ws://localhost:8080/ws"); socket.onopen function() {var message {"action": "greet","name": …

HTML LocalStorage

文章目录 关于HTML本地存储localStorage介绍用法如何获取localStorage中存储的所有值浏览器中查看Local Storage页面输出 关于HTML本地存储 Window.localStorage localStorage介绍 只读的localStorage 属性允许你访问一个Document 源&#xff08;origin&#xff09;的对象 S…

6 款最佳照片恢复程序助您找回重要照片

用 iPhone、Android 手机或其他数码设备拍摄并保存照片越来越流行。当您丢失一些重要的照片时&#xff0c;最好的照片恢复方法是什么&#xff1f;无论照片是由于存储空间有限而丢失&#xff0c;还是设备突然崩溃&#xff0c;当您需要恢复丢失的照片时&#xff0c;以下是本文中 …

java.nio.charset.UnmappableCharacterException

问题 java.lang.IllegalArgumentException: java.nio.charset.UnmappableCharacterException: Input length 1 解释为编码转换有问题 问题错在位置 非汉字存在 打包的时候就会报异常

公司面试题总结(五)

25.谈一谈箭头函数与普通函数的区别&#xff0c;箭头函数主要解决什么问题&#xff1f; 箭头函数与普通函数的区别&#xff1a; ⚫ 语法简洁性&#xff1a; ◼ 箭头函数使用>符号定义&#xff0c;省略了 function 关键字&#xff0c;使得语法更为紧凑。 ◼ 对于单行函…

【蓝桥杯】C语言常见高级算法

&#x1f338;个人主页&#xff1a;Yang-ai-cao &#x1f4d5;系列专栏&#xff1a;蓝桥杯 C语言 &#x1f34d;博学而日参省乎己&#xff0c;知明而行无过矣 目录 &#x1f338;个人主页&#xff1a;Yang-ai-cao &#x1f4d5;系列专栏&#xff1a;蓝桥杯 C语言 &a…

高精度定位技术的必要性与实际应用

在当今社会&#xff0c;随着科技的飞速发展&#xff0c;高精度精准定位技术已成为一项不可或缺的基础技术&#xff0c;其应用范围涉及军事、航空、智能交通、无人驾驶、智慧城市建设等众多领域。高精度精准定位不仅为人们的日常生活带来极大便利&#xff0c;还对提升国家的科技…