当前位置：首页 > news >正文

【CSS3】CSS3 动画 ④ ( 使用动画制作地图热点图 )

news 文章来源：https://blog.csdn.net/han1202012/article/details/132187985 2025/2/7 3:00:01

文章目录

一、需求说明
二、动画代码分析
- 1、地图背景设置
- 2、热点动画位置测量
- 3、热点动画布局分析
- 4、动画定义
- 5、小圆点实现
- 6、波纹效果盒子实现
- 7、延迟动画设置
三、代码示例

一、需求说明

实现如下效果 , 在一张地图上 , 以某个位置为中心点 , 向四周发散 ;

在这里插入图片描述

核心是实现向四周发散的波纹动画 ;

二、动画代码分析

1、地图背景设置

地图背景设置 :

地图是一张 png 格式的半透明背景图片 , 图片大小为 747 x 617 像素 ;

使用地图图片作为 div 盒子模型的背景图片 ;

    <!-- 为 该 div 盒子模型 设置 类名为 map --><div class="map"></div>

上述 .map 类对应的 div 盒子模型的大小 , 也要设置为 747 x 617 像素 ; 同时设置地图背景图片 , 并设置水平居中 ;

        .map {/* 盒子模型的宽高 就是 背景图片的宽高 */width: 747px;height: 617px;/* 设置背景图片 */background: url(images/map.png);/* 上下外边距设置为 0 , 左右外边距设置为 auto 居中 */margin: 0 auto;}

该地图是半透明白色背景 , 需要设置一个暗色的整体背景 , 才能看出来 , 这里将页面设置成 #333 颜色的纯色背景 ;

        body {background-color: #333;}

设置完毕后 , 可以在网页中查看该背景图 ;

2、热点动画位置测量

在 map 父容器中 , 定义 city 子元素 , 该子元素使用绝对定位放置位置 ;

<body><!-- 为 该 div 盒子模型 设置 类名为 map --><div class="map"><!-- 为 该 div 盒子模型 设置 类名为 city --><div class="city">田</div></div>
</body>

为上述 city 标签元素设置 CSS 样式 , 设置其定位方式为绝对定位 , 根据 " 子绝父相 " 原则 , 该子元素所在的父容器必须要使用相对定位 ;

使用 left 和 top 设置该子元素在父容器内距离左侧的位移和距离顶部的位移 ;

        .city {/* 使用绝对定位进行定位 , 子绝父相 , 父容器 相对定位 */position: absolute;/* 绝对定位位置 : 距离顶部的位移 */top: 100px;/* 绝对定位位置 : 距离左侧的位移 */left: 100px;/* 设置白色 , 容易分辨 */color: white;}

下面通过 F12 调试的方式 , 将 city 盒子 , 使用绝对定位定位到地图图片中的北京位置 ;

调试界面中 , 找到 city 盒子模型位置 , 双击其 top 和 left 尺寸 , 使用鼠标滚轮修改该盒子模型绝对定位的位置 ;

Ctrl + 鼠标滚轮一次可以增减 100 像素 ;
Shift + 鼠标滚轮一次可以增减 10 像素 ;
鼠标滚轮一次可以增减 1 像素 ;
Alt+ 鼠标滚轮一次可以增减 0.1 像素 ;

最终得到 , 将 city 布局设置到北京位置 , top 属性值为 220 像素 , left 属性值为 562 像素 ;
在这里插入图片描述

3、热点动画布局分析

分析热点动画 , 发现内层的蓝色实心小圆圈是不变的 , 始终都存在 ;

然后放置 2 ~ 3 个可缩放的原型图片作为热点动画的波纹 ;

页面的布局如下 : 其中的 dot 盒子是中心小圆点盒子 , bowen1 ~ bowen3 是三个波纹效果动画盒子 ;

<body><!-- 为 该 div 盒子模型 设置 类名为 map --><div class="map"><!-- 为 该 div 盒子模型 设置 类名为 city --><div class="city"><!-- 该 div 盒子模型 是 中心的 小圆点 --><div class="dot"></div><!-- 该 div 盒子模型 是 波纹 --><div class="bowen1"></div><div class="bowen2"></div><div class="bowen3"></div></div></div>
</body>

4、动画定义

动画实现如下 : 波纹效果动画 , 就是将盒子模型的大小 , 逐渐设置到 100 像素 , 中间可以设置若干动画节点 ;

        @keyframes bowen {0% {}70% {/* 执行到 70% 时 盒子变为 70 像素宽高 透明度为 0 不可见 */width: 70px;height: 70px;opacity: 1;}100% {/* 放到最大时 盒子变为 100 像素宽高 透明度为 0 不可见 */width: 100px;height: 100px;opacity: 0;}}

5、小圆点实现

小圆点实现 : 小圆点直接通过盒子模型实现 , 该盒子模型宽高 8 像素 , 设置 50% 圆角 , 将外形设置为圆形 ;

        .dot {/* 设置小圆点宽高 */width: 8px;height: 8px;/* 设置小圆点背景颜色 */background-color: #09f;/* 将标签设置为圆形 */border-radius: 50%;}

6、波纹效果盒子实现

波纹效果盒子实现 :

该盒子始终要放置在 city 盒子中心位置 , 因此使用绝对定位 position: absolute; 设置了 top: 50%; , left: 50%; , 以及 transform: translate(-50%, -50%); 样式 ;
该盒子模型设置一个阴影 , box-shadow: 0 0 12px #009dfd; , x , y 轴偏移为 0 , 阴影半径 12 像素 ;
动画属性设置为 animation: bowen 1.5s linear infinite; , 使用 bowen 动画 , 持续时间 1.5 秒 , 使用线性函数 , 无限循环播放 ;

        .city div[class^="bowen"] {/* city 类下的 div 类型标签 , 类型是以 bowen 开头的标签 *//* 使用绝对定位进行定位 , 子绝父相 , 父容器 相对定位 */position: absolute;/* 绝对定位位置 : 距离顶部的位移 */top: 50%;/* 绝对定位位置 : 距离左侧的位移 */left: 50%;/* 保证 波纹 在 父容器中 垂直 / 水平 居中对齐放大后 , 以中心为终点 向四周发散 */transform: translate(-50%, -50%);/* 设置波纹宽高 , 之后设置其放大 */width: 8px;height: 8px;/* 设置阴影 x , y 轴偏移为 0 , 阴影半径 12 像素 */box-shadow: 0 0 12px #009dfd;/* 设置布局为圆形 , 不要是四方的 */border-radius: 50%;/* 设置动画属性 */animation: bowen 1.5s linear infinite;}

7、延迟动画设置

第二个波纹和第三个波纹的动画 , 需要延迟 0.5 秒和 1 秒执行 ;

注意选择器的提权使用 , 之前使用了 .city div[class^="bowen"] 选择器设置了动画属性 , 如果设置动画延迟属性的选择器优先级低于前者选择器 , 那么设置是无效的 , 因此这里使用了 .city div.bowen2 选择器进行了提权 ;

        .city div.bowen2 {/* 选择器这么写是为了使该选择器 与 .city div[class^="bowen"] 选择器 权限相同否则 该设置 不生效 */animation-delay: 0.5s;}.city div.bowen3 {/* 选择器这么写是为了使该选择器 与 .city div[class^="bowen"] 选择器 权限相同否则 该设置 不生效 */animation-delay: 1s;}

三、代码示例

代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- 设置 meta 视口标签 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>CSS3 动画属性示例 - 地图热点</title><style>body {background-color: #333;}.map {/* 子绝父相 , 子元素使用绝对定位 , 该父容器需要使用相对定位 */position: relative;/* 盒子模型的宽高 就是 背景图片的宽高 */width: 747px;height: 617px;/* 设置背景图片 */background: url(images/map.png);/* 上下外边距设置为 0 , 左右外边距设置为 auto 居中 */margin: 0 auto;}.city {/* 使用绝对定位进行定位 , 子绝父相 , 父容器 相对定位 */position: absolute;/* 绝对定位位置 : 距离顶部的位移 */top: 228px;/* 绝对定位位置 : 距离左侧的位移 */left: 548px;/* 设置白色 , 容易分辨 */color: white;}.dot {/* 设置小圆点宽高 */width: 8px;height: 8px;/* 设置小圆点背景颜色 */background-color: #09f;/* 将标签设置为圆形 */border-radius: 50%;}.city div[class^="bowen"] {/* city 类下的 div 类型标签 , 类型是以 bowen 开头的标签 *//* 使用绝对定位进行定位 , 子绝父相 , 父容器 相对定位 */position: absolute;/* 绝对定位位置 : 距离顶部的位移 */top: 50%;/* 绝对定位位置 : 距离左侧的位移 */left: 50%;/* 保证 波纹 在 父容器中 垂直 / 水平 居中对齐放大后 , 以中心为终点 向四周发散 */transform: translate(-50%, -50%);/* 设置波纹宽高 , 之后设置其放大 */width: 8px;height: 8px;/* 设置阴影 x , y 轴偏移为 0 , 阴影半径 12 像素 */box-shadow: 0 0 12px #009dfd;/* 设置布局为圆形 , 不要是四方的 */border-radius: 50%;/* 设置动画属性 */animation: bowen 1.5s linear infinite;}.city div.bowen2 {/* 选择器这么写是为了使该选择器 与 .city div[class^="bowen"] 选择器 权限相同否则 该设置 不生效 */animation-delay: 0.5s;}.city div.bowen3 {/* 选择器这么写是为了使该选择器 与 .city div[class^="bowen"] 选择器 权限相同否则 该设置 不生效 */animation-delay: 1s;}@keyframes bowen {0% {}70% {/* 执行到 70% 时 盒子变为 70 像素宽高 透明度为 0 不可见 */width: 70px;height: 70px;opacity: 1;}100% {/* 放到最大时 盒子变为 100 像素宽高 透明度为 0 不可见 */width: 100px;height: 100px;opacity: 0;}}</style>
</head><body><!-- 为 该 div 盒子模型 设置 类名为 map --><div class="map"><!-- 为 该 div 盒子模型 设置 类名为 city --><div class="city"><!-- 该 div 盒子模型 是 中心的 小圆点 --><div class="dot"></div><!-- 该 div 盒子模型 是 波纹 --><div class="bowen1"></div><div class="bowen2"></div><div class="bowen3"></div></div></div>
</body></html>

执行效果 :
在这里插入图片描述

【CSS3】CSS3 动画 ④ ( 使用动画制作地图热点图 )

文章目录一、需求说明二、动画代码分析1、地图背景设置2、热点动画位置测量3、热点动画布局分析4、动画定义5、小圆点实现6、波纹效果盒子实现7、延迟动画设置三、代码示例一、需求说明实现如下效果 , 在一张地图上 , 以某个位置为中心点 , 向四周发散 ; 核心是实现向四周…...

编程日记 2023/8/9 22:15:38

命令模式(Command)

命令模式是一种行为设计模式，可将一个请求封装为一个对象，用不同的请求将方法参数化，从而实现延迟请求执行或将其放入队列中或记录请求日志，以及支持可撤销操作。其别名为动作(Action)模式或事务(Transaction)模式。 Command is …...

编程日记 2023/8/9 22:14:35

Dapper 微型orm的光

介绍 Dapper是一个轻量级的ORM（对象关系映射）框架，它可以方便地将数据库查询结果映射到.NET对象上，同时也支持执行原生SQL查询。下面我将详细介绍Dapper的使用方法。安装Dapper 首先，你需要通过NuGet包管理器将Dap…...

编程日记 2023/8/9 22:13:34

Mysql随心记--第一篇

MylSAM：查询速度快，有较好的索引优化和数据压缩技术，但是它不支持事务 InnoDB：它支持事务，并且提供行级的锁定，应用也相当广泛 docker ps -a --filter "ancestormysql" 查看linux中创建了多少个d…...

编程日记 2023/8/9 22:12:32

使用dockerfile安装各种服务组件 elasticsearch、minio、mongodb、nacos、redis 一、使用dockerfile安装elasticsearch:7.8.0 1、Dockerfile文件 FROM elasticsearch:7.8.0 #添加分词器 ADD elasticsearch-analysis-ik /usr/share/elasticsearch/plugins/elasticsearch-anal…...

编程日记 2023/8/9 22:11:30

如何简单的无人直播

环境搭建 ffmpeg安装，我这里用的是centos搭建的，其他平台可以自己百度 yum -y install wgetwget --no-check-certificate https://www.johnvansickle.com/ffmpeg/old-releases/ffmpeg-4.0.3-64bit-static.tar.xztar -xJf ffmpeg-4.0.3-64bit-static.ta…...

编程日记 2023/8/9 22:10:28

【基于HBase和ElasticSearch构建大数据实时检索项目】

基于HBase和ElasticSearch构建大数据实时检索项目一、项目说明二、环境搭建三、编写程序四、测试流程一、项目说明利用HBase存储海量数据，解决海量数据存储和实时更新查询的问题；利用ElasticSearch作为HBase索引，加快大数据集中实时查询数…...

编程日记 2023/8/9 22:09:27

ProComponent 用法学习

相信很多同学都用过 Ant Design 这一 react 著名组件库，而 ProComponents 则是在 antd 之上进行封装的页面级组件库（指一个组件就可以搞定一个页面）。它同时也是 Ant Design Pro 中后台框架所用的主要组件库。如果你手上有要用 react 开发的中…...

编程日记 2023/8/9 22:08:26

巨人互动|Google海外户Google Analytics的优缺点是什么？

Google Analytics是一个由谷歌开发的网站分析工具，旨在帮助网站和移动应用程序运营者收集和分析数据，以更好地了解用户行为和改进业务。虽然Google Analytics具有许多优势，但也存在一些缺点。在本文中，我们将探讨Google Analytics…...

编程日记 2023/8/9 22:07:25

MySQL数据库的操作

MySQL 连接服务器库的操作创建数据库数据库删除查看数据库进入数据库查看所在的数据库修改数据库显示创建语句查看连接情况表的操作创建表查看数据库所有的表查看表的详细信息查看创建表时的详细信息删除表修改表名向表中插入数据在表结构中新增一列对表结构数据的修改删除表…...

编程日记 2023/8/9 22:06:24

人工智能行业岗位一览

人工智能行业的岗位薪资高、待遇好、涨薪快已经是公开的事实，那么在人工智能行业中具体有哪些职业岗位呢？对于普通人来说，想要入行人工智能又有哪些机会呢？ 下面是人工智能领域中的一部分职业岗位，随着技术的不断发展&…...

编程日记 2023/8/9 22:05:23

《Linux运维实战：Docker基础总结》

一、简介 1、docker的基本结构是什么，包含哪些组件？ docker的基本机构是c/s模式，即客户端/服务端模式。由docker客户端和docker守护进程组成。docker客户端通过命令行或其它工具使用docker sdk与docker守护进程通信，发送容器管理…...

编程日记 2023/8/9 22:04:21

Clash 意外退出后 chrome / google 谷歌浏览器无法连接互联网

解决方案： 以管理员模式打开命令行，输入：netsh winsock reset ，然后重启电脑如果还不行的话， 在 chromevs中选中设置>隐私和安全>安全>使用安全 dns> 使用您当前的服务提供商即可...

编程日记 2023/8/9 22:03:20

89 | Python人工智能篇 —— 深度学习算法 Keras 实现 MNIST分类

本教程将带您深入探索Keras，一个开源的深度学习框架，用于构建人工神经网络模型。我们将一步步引导您掌握Keras的核心概念和基本用法，学习如何构建和训练深度学习模型，以及如何将其应用于实际问题中。文章目录 Keras 构建实际mnist图像分类案例.1. 介绍2. 环境搭建3. 数据准…...

编程日记 2023/8/9 22:02:15

每天一道leetcode：剑指 Offer 32 - III. 从上到下打印二叉树 III（中等广度优先遍历）

今日份题目： 请实现一个函数按照之字形顺序打印二叉树，即第一行按照从左到右的顺序打印，第二层按照从右到左的顺序打印，第三行再按照从左到右的顺序打印，其他行以此类推。示例给定二叉树: [3,9,20,null,null,15,7…...

编程日记 2023/8/9 22:01:13

day10 快速排序方法重载和方法递推

方法重载斐波拉契数列问题使用重载思想解决 public static int method(int n){if (n 2 ){return 1 ;}return (n-1)*2method(n-1);}public static int f(int n){if (n 1){return 1;}if (n 2){return 2;}return f(n-1)f(n-2);} 快速排序思维很简单，类似二…...

编程日记 2023/8/9 22:00:10

Qt 6. 其他类调用Ui中的控件

1. 把主类指针this传给其他类，tcpClientSocket new TcpClient(this); //ex2.cpp #include "ex2.h" #include "ui_ex2.h"Ex2::Ex2(QWidget *parent): QDialog(parent), ui(new Ui::Ex2) {ui->setupUi(this);tcpClientSocket new TcpClient…...

编程日记 2023/8/9 21:59:09

PHP 的不同版本（src 版、nts 版和 win 版）之间的区别和共同点。

在下载php时会有很多版本供我们选择，PHP 的不同版本（src 版、nts 版和 win 版）之间的区别又是什么呢。 src 版本：src 版本指的是 PHP 的源代码版本，您需要自行编译并安装它。这个版本通常用于自定义编译、开发环境和高…...

编程日记 2023/8/9 21:58:08

3 vue的if语法

vue的if语法是相当于一个标签的属性来写进去的，比如说<h1 v-if“”>。要注意的是if语句里可以自动从数据层取值的，比如<h1 v-if"message">，这里就会自动把key为message的值取过来，而如果要传一个字符串&…...

编程日记 2023/8/9 21:57:06

python基础3——流程控制

文章目录一、操作符1.1 比较操作符1.2 逻辑操作符1.3 成员操作符1.4 身份操作符二、流程控制2.1 条件判断2.2 循环语句2.2.1 for循环2.2.2 while循环 2.3 continue与break语句2.4 文件操作函数三、函数3.1 定义函数3.2 作用域3.3 闭包3.4 函数装饰器3.5 内建函数一、操作符…...

编程日记 2023/8/9 21:56:00

kubernetes中最小组件——Pod

目录一、Pod简介二、Pod的使用方式三、Pause——Pod中底层基础容器四、为什么kubernetes这样设计Pod 五、Pod的分类 1.自主式Pod 2.控制器管理的Pod 3.静态Pod 六、Pod容器的分类 1. 基础容器（infrastructure container） 2. 初始化容器&am…...

编程日记 2023/8/9 21:54:58

C++ 友元

文章目录前言一、什么是友元二、友元的特性三、示例代码总结前言在C编程中，友元（friend）是一种特殊的关系，允许一个类或函数访问另一个类中的私有成员。一、什么是友元 1.友元的定义： 友元在C中可以被用于类和…...

编程日记 2023/8/9 21:53:57

Vulkan 绘制显示设计

背景众所周知，Vulkan是个跨平台的图形渲染API，为了友好地支持跨平台，Vulkan自然也抽象出了很多接口层去对接各个操作系统，抹平系统间的差异，Swap Chains即为WSI。其本质上是一种图像队列，此队列会按顺序…...

编程日记 2023/8/9 21:52:56

Linux性能分析工具介绍(一)--cpu及功耗相关工具介绍

目录一、引言二、CPU及功耗分析工具介绍 ------>2.1、cpuinfo ------------>2.1.1、cpuid指令 ------>2.2、lscpu ------>2.3、turbostat ------>2.4、rdmsr ------>2.5、mpstat ------>2.6、/proc/stat ------>2.7、powertop ----------…...

编程日记 2023/8/9 21:51:55

智能财务分析的无冕之王-奥威BI数据可视化工具

利用智能数据可视化分析工具，可极大提升财务分析效率和报表可读性，缩短从分析到决策的耗时。但财务分析的难度往往比其他分析更高，因为它的分析指标计算组合变化太多也太快。哪些数据可视化工具能胜任智能财务数据分析？ 奥威BI数…...

编程日记 2023/8/9 21:50:54

.NET 应用程序部署

**硬件支持型号点击查看硬件支持详情** DTU701 产品详情 DTU702 产品详情 DTU801 产品详情 DTU802 产品详情 DTU902 产品详情 G5501 产品详情本文内容在设备上部署 dotnet应用，与任何其他平台的部署相同，可以2种方式： 依赖于框…...

编程日记 2023/8/9 21:49:53

Linux CentOS安装NVIDIA GPU驱动程序和NVIDIA CUDA工具包

要在CentOS上安装NVIDIA驱动程序和NVIDIA CUDA工具包，您可以按照以下步骤进行操作： 1. 准备工作： 确保您的系统具有兼容的NVIDIA GPU。您可以在NVIDIA官方网站上查找支持CUDA的GPU型号列表。如果您之前已经安装了Nouveau驱动程序并禁用了它…...

编程日记 2023/8/9 21:48:50

剑指Offer13.机器人的运动范围 C++

1、题目描述地上有一个m行n列的方格，从坐标 [0,0] 到坐标 [m-1,n-1] 。一个机器人从坐标 [0, 0] 的格子开始移动，它每次可以向左、右、上、下移动一格（不能移动到方格外），也不能进入行坐标和列坐标的数位之和大于k的…...

编程日记 2023/8/9 21:47:47

List、Map、Set打印

List List：和数组类似，List可以动态增长，查找元素效率高，插入删除元素效率低，因为会引起其他元素位置改变。普通[1,2] 1.循环 2.System.out.println(list); int数组[1,2,3,4,5,6,1,2,3] 1.for (int[] array : list)…...

编程日记 2023/8/9 21:45:45

软件机器人在渔业船员证书核发中自动化二次审批制证，提高效率和准确性

近年来，随着科技的不断进步，自动化软件机器人在各个领域得到了广泛应用。在渔业船员证书核发事项中，传统的审批和制证流程相对繁琐。博为小帮软件机器人可以让这一流程变得更加高效和准确。在过去，渔业船员证书核发事项需要在省级…...

编程日记 2023/8/9 21:44:43

公司网站建设应注意哪些/专业营销团队外包公司

百度搜索引擎对网站的收录与很多方面的因素有关，网站如果想要得到百度搜索引擎收录的话，站长需要不断对网站的整体结构进行调整和完善，从网站结构、内容、链接等细节方面着手优化，才能突破收录困境，循序渐进的提升网站…...

编程日记 2025/2/6 20:39:45

常州手机网站制作/代做百度首页排名价格

微服务架构微服务的诞生并非偶然，它是在互联网高速发展，技术日新月异的变化以及传统架构无法适应快速变化等多重因素的推动下诞生的产物。互联网时代的产品通常有两类特点：需求变化快和用户群体庞大，在这种情况下，如…...

编程日记 2025/2/6 18:25:21

网站建设费用哺乳期可以吃党参吗/2021年网络热点舆论

题目：原题链接（困难） 标签：动态规划解法时间复杂度空间复杂度执行用时Ans 1 (Python)O(N2)O(N^2)O(N2)O(N2)O(N^2)O(N2)492ms (47.06%)Ans 2 (Python)Ans 3 (Python) 解法一： class Solution:def shortestCommonSu…...

编程日记 2025/2/6 17:29:34

廊坊做网站电话/百度浏览器在线打开

问题描述：父组件传如lesser和larger两个参数，并且是ajax从服务器获取的。子组件定义created阶段输出lesser和larger。但larger为空。改成延迟输出则正确。问题来源：https://segmentfault.com/q/1010000008912491提问者的主要问题是没有搞清楚…...

编程日记 2025/2/6 16:26:56