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

news2024/11/15 11:47:05

文章目录

  • 一、需求说明
  • 二、动画代码分析
    • 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>

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/854403.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

go-zero 是如何做路由管理的？

go-zero 是如何做路由管理的？

原文链接&#xff1a; go-zero 是如何做路由管理的&#xff1f; go-zero 是一个微服务框架&#xff0c;包含了 web 和 rpc 两大部分。 而对于 web 框架来说&#xff0c;路由管理是必不可少的一部分&#xff0c;那么本文就来探讨一下 go-zero 的路由管理是怎么做的&#xff0c…
阅读更多...
速卖通，国际站店铺想要增加曝光，提升销量，测评补单有效果吗？

速卖通，国际站店铺想要增加曝光，提升销量，测评补单有效果吗？

作为一个卖家&#xff0c;成功运营速卖通店铺需要一系列的策略和技巧 1.借助平台的力量对于成长期的店铺来说&#xff0c;平台本身是最大的流量来源。如何从平台那儿获取更多的支持则成为这个阶段最重要的难题。以速卖通为例&#xff0c;经过反复测试&#xff0c;平台给普通卖家…
阅读更多...
LeetCode练习习题集【4月 - 7 月】

LeetCode练习习题集【4月 - 7 月】

LEETCODE习题集【4月-7月总结】 简单 数组部分 1.重复数 题目&#xff1a; 在一个长度u为 n 的数组 nums 里的所有数字都在 0&#xff5e;n-1 的范围内。数组中某些数字是重复的&#xff0c;但不知道有几个数字重复了&#xff0c;也不知道每个数字重复了几次。请找出数组中…
阅读更多...
蛋糕小程序商店制作攻略教程分享

蛋糕小程序商店制作攻略教程分享

想要开发一个蛋糕小程序商店&#xff0c;可以通过以下步骤进行操作&#xff1a; 1.首先&#xff0c;我们需要注册登录账号&#xff0c;进入操作后台。找到并点击【商城】中的【去管理】进入商城的后台管理页面。然后再点击【小程序商城】模块中的【去装修】进入小程序商城的制作…
阅读更多...
【torch.nn.PixelShuffle】和 【torch.nn.UnpixelShuffle】

【torch.nn.PixelShuffle】和 【torch.nn.UnpixelShuffle】

文章目录 torch.nn.PixelShuffle直观解释官方文档 torch.nn.PixelUnshuffle直观解释官方文档 torch.nn.PixelShuffle 直观解释 PixelShuffle是一种上采样方法&#xff0c;它将形状为 ( ∗ , C r 2 , H , W ) (∗, C\times r^2, H, W) (∗,Cr2,H,W)的张量重新排列转换为形状为…
阅读更多...
网络安全 Day28-运维安全项目-加密隧道

网络安全 Day28-运维安全项目-加密隧道

运维安全项目-加密隧道 1. 加密隧道服务概述2. openVPN应用场景3. 虚拟机环境准备3.0 准备知识3.1 添加网卡![请添加图片描述](https://img-blog.csdnimg.cn/f155ca2804d84118b89a69da3688911e.png)3.2 配置内网&#xff08;LAN区段)3.3 虚拟机选择LAN区段3.4 书写eth1网卡配置…
阅读更多...
力扣hot100刷题记录

力扣hot100刷题记录

二刷hot100&#xff0c;坚持每天打卡&#xff01;&#xff01;&#xff01; 1. 两数之和 // 先求差&#xff0c;再查哈希表 public int[] twoSum(int[] nums, int target) {Map<Integer,Integer> map new HashMap<>();for(int i 0;i<nums.length;i){int key …
阅读更多...
UE Mesh Generation and Editing at Runtime

UE Mesh Generation and Editing at Runtime

UE Mesh Generation and Editing at Runtime 虚幻运行时和编辑器下生成和编辑 网格体。 UE Mesh 虚幻中常用的三种网格体 UProceduralMeshComponent 程序化网格体 UStaticMeshComponent 静态网格体 USimpleDynamicMeshComponent 动态网格体 借用他人总结的&#xff0c;UE4…
阅读更多...
设计一个“完美“的测试用例，用户登录模块实例...

设计一个“完美“的测试用例，用户登录模块实例...

前言 好的测试用例一定是一个完备的集合&#xff0c;它能够覆盖所有等价类以及各种边界值&#xff0c;而跟能否发现缺陷无关 好的测试用例必须具备哪些特征 整体完备性&#xff1a;一定是一个完备的整体&#xff0c;是有效测试用例组成的集合&#xff0c;能够完全覆盖测试需…
阅读更多...
在vue中Antv G2 折线图如何添加点击事件获取折线上点的值

在vue中Antv G2 折线图如何添加点击事件获取折线上点的值

在项目中有个需求是点击折线图的点&#xff0c;获取当前点的信息&#xff0c;其它图形都可以参考相关的API获取到&#xff0c;但area做的折线图怎么都获取不到点击的信息&#xff0c;只能获取全部的信息&#xff0c;最终解决如下&#xff1a; 实现思路 用户的鼠标在折线图上移…
阅读更多...
高中教师能去美国做访问学者吗？

高中教师能去美国做访问学者吗？

美国作为世界上高等教育水平较高的国家之一&#xff0c;吸引了众多学者前往交流学习。那么高中教师是否能够成为美国访问学者&#xff0c;这是当然的&#xff0c;高中老师是可以出国访学的&#xff0c;但是出国做访问学者会涉及到多方面的因素。 首先&#xff0c;教师个人的学术…
阅读更多...
带你Debug SpringApplication.run(MainApp.class, args) 看看SpringBoot 如何启动Tomcat

带你Debug SpringApplication.run(MainApp.class, args) 看看SpringBoot 如何启动Tomcat

&#x1f600;前言 本篇博文是关于SpringBoot 如何启动Tomcat的笔记&#xff0c;希望能够让你到SpringBoot印象深刻&#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到…
阅读更多...
2023深圳杯A题完整代码模型

2023深圳杯A题完整代码模型

已更新深圳杯A题全部版本&#xff0c;文末获取&#xff01; 摘要 现代社会&#xff0c;随着生活方式的变化和工作压力的增大&#xff0c;慢性非传染性疾病日益成为威胁公众健康的主要问题。心脑血管疾病、糖尿病、恶性肿瘤及慢性阻塞性肺病等慢性病的发病率呈现出上升趋势。为…
阅读更多...
Linux 安装部署Seata

Linux 安装部署Seata

标题&#xff1a;在Linux上安装部署Seata分布式事务解决方案 导语&#xff1a; Seata是一个开源的分布式事务解决方案&#xff0c;旨在解决分布式环境下的事务一致性问题。本文将为您介绍如何在Linux操作系统上安装和部署Seata&#xff0c;为您的分布式应用添加强大的事务支持。…
阅读更多...
【【萌新的STM32学习-7】】

【【萌新的STM32学习-7】】

萌新的STM32学习-7 MAP 文件是MDK代码编译之后&#xff0c;产生的集程序&#xff0c;数据及IO 空间的一种映射列表文件 map 文件是编译器链接时生成的一个文件&#xff0c;它主要包含了交叉链接信息。通过.map 文 件&#xff0c;我们可以知道整个工程的函数调用关系、FLASH 和 …
阅读更多...
ThingJS开发使用感受

ThingJS开发使用感受

封面来源于网络。 一、前言 1. 背景 出于为了实现有关厂区的数字孪生项目&#xff0c;断断续续使用ThingJS平台开发一年左右&#xff0c;做一个使用感受的总结。 2. 业务场景 开发一个基于厂区的数字孪生项目&#xff0c;基于ThingJS低代码开发的页面分为div3d、div2d结构&am…
阅读更多...
【深度学习笔记】深度学习框架

【深度学习笔记】深度学习框架

本专栏是网易云课堂人工智能课程《神经网络与深度学习》的学习笔记&#xff0c;视频由网易云课堂与 deeplearning.ai 联合出品&#xff0c;主讲人是吴恩达 Andrew Ng 教授。感兴趣的网友可以观看网易云课堂的视频进行深入学习&#xff0c;视频的链接如下&#xff1a; 神经网络和…
阅读更多...
【源码编译并安装RocketMQ Dashboard】

【源码编译并安装RocketMQ Dashboard】

【源码编译并安装RocketMQ Dashboard】 一、环境说明二、源码编译并执行三、小结 一、环境说明 安装环境&#xff1a;虚拟机VMWare Centos7.6 Maven3.6.3 JDK1.8已经安装了RocketMQ-5.1.3 单Master集群&#xff0c;且使用Local模式部署&#xff0c;即Broker和Proxy同进程部署…
阅读更多...
【Java】CAS数据交换流程

【Java】CAS数据交换流程

CAS的全称是&#xff1a; Compare And Swap(比较再交换)&#xff0c;它体现的一种乐观锁的思想&#xff0c;在无锁情况下保证线程操作共享数据的原子性。 CAS数据交换流程&#xff1a; 此时线程A和线程B都从主内存中拷贝了一份a100的共享变量到自己的工作内存中 线程A操作了变…
阅读更多...
手势识别rtos小车（1）----手部识别

手势识别rtos小车（1）----手部识别

1.安装mediapipe库和cv2库 pip install opencv-python -i https://pypi.tuna.tsinghua.edu.cn/simplepip install Mediapipe0.8.9.1 -i https://pypi.tuna.tsinghua.edu.cn/simple some-package 这里我主要还是弄明白了这个pycharm编辑器和项目之间的关系&#xff0c;我在这里…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023