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

文章目录

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Java Web基础】mvn命令、Maven的安装与配置

本文极大程度上来自Maven安装(超详解)&#xff0c;但是担心安的过程中遇到什么不一样的问题&#xff0c;顺便加深印象&#xff0c;所以还是打算自己弄一篇。 目录 第一步&#xff1a;Download Maven第二步&#xff1a;解压与安装2.1 解压2.2 安装 第一步&#xff1a;Download …

Three.js纹理贴图

目录 Three.js入门 Three.js光源 Three.js阴影 Three.js纹理贴图 纹理是一种图像或图像数据&#xff0c;用于为物体的材质提供颜色、纹理、法线、位移等信息&#xff0c;从而实现更加逼真的渲染结果。 纹理可以应用于Three.js中的材质类型&#xff0c;如MeshBasicMaterial…

ClickHouse(九):Clickhouse表引擎 - Log系列表引擎

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术&#xff0c;IT贫道_Apache Doris,Kerberos安全认证,大数据OLAP体系技术栈-CSDN博客 &…

Clickhouse 数据存储

一、数据分区 数据是以分区目录的形式组织的&#xff0c;每个分区独立分开存储.这种形式&#xff0c;查询数据时&#xff0c;可以有效的跳过无用的数据文件。 1.1 数据分区的规则 分区键的取值&#xff0c;生成分区ID&#xff0c;分区根据ID决定。根据分区键的数据类型不同&am…

PoseiSwap 开启“Poseidon”池,治理体系或将全面开启

PoseiSwap曾在前不久分别以IDO、IEO的方式推出了POSE通证&#xff0c;但PoseiSwap DEX中并未向除Zepoch节点外的角色开放POSE资产的交易。而在前不久&#xff0c;PoseiSwap推出了全新的“Poseidon”池&#xff0c;该池将向所有用户开放&#xff0c;并允许用户自由的进行质押、交…

springboot(2)

springmvc 把软件系统分为3个基本部分&#xff1a;模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;和控制器 &#xff08;Controller&#xff09;。 模型&#xff08;Model&#xff09;&#xff1a;Model是由一个实体Bean实现的&#xff0c;是数据的载体…

【Pytorch+torchvision】MNIST手写数字识别

深度学习入门项目&#xff0c;含代码详细解析 在本文中&#xff0c;我们将在PyTorch中构建一个简单的卷积神经网络&#xff0c;并使用MNIST数据集训练它识别手写数字。 MNIST包含70,000张手写数字图像: 60,000张用于培训&#xff0c;10,000张用于测试。图像是灰度&#xff08;即…

特殊符号的制作 台风 示例 使用第三方工具 Photoshop 地理信息系统空间分析实验教程 第三版

特殊符号的制作 首先这是一个含有字符的&#xff0c;使用arcgis自带的符号编辑器制作比较困难。所以我们准备采用Adobe Photoshop 来进行制作符号&#xff0c;然后直接导入符号的图片文件作为符号 我们打开ps&#xff0c;根据上面的图片的像素长宽比&#xff0c;设定合适的高度…

SIP协议之音/视频转换

在SIP通话应用场景中&#xff0c;有时需要在音频和视频通话中进行切换&#xff0c;这个功能实现的需要发送re-INVITE重新协商媒体&#xff0c;即重新协商媒体&#xff08;SDP)中是否允许视频。 一、实现原理 1.1 音频转视频 音频通话过程中&#xff0c;发起方重新发送INVITE消…

【力扣每日一题】2023.8.6 两两交换链表中的节点

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目给我们一个链表&#xff0c;让我们两两交换相邻节点的值&#xff0c;并且不能通过修改节点内部的值来达到这一目的&#xff0c;如果可…

【计算机视觉 | Kaggle】飞机凝结轨迹识别 Baseline 分享和解读(含源代码)

文章目录 一、导读二、比赛背景三、比赛任务四、比赛数据五、评价指标六、Baseline6.1 Training part6.2 Submission part 一、导读 比赛名称&#xff1a;Google Research - Identify Contrails to Reduce Global Warming https://www.kaggle.com/competitions/google-researc…

Meta开源AI音频和音乐生成模型

在过去的几年里&#xff0c;我们看到了AI在图像、视频和文本生成方面的巨大进步。然而&#xff0c;音频生成领域的进展却相对滞后。MetaAI这次再为开源贡献重磅产品&#xff1a;AudioCraft&#xff0c;一个支持多个音频生成模型的音频生成开发框架。 AudioCraft开源地址 开源地…

使用Flask框架mock server实战(三)

1、demo1&#xff1a;登录接口 1.1 Flask代码 from flask import request, Flask, jsonify# 创建1个实例 app Flask(__name__)# 解决接收中文报文乱码问题 app.config[JSON_AS_ASCII] False# 登录接口 # 指定路由和请求方法。strict_slashesFalse 对URL最后的/符合是否严格…

QT生成可执行文件的步骤

QT生成可执行文件的步骤 第一步&#xff1a;debug为release&#xff0c;然后进行编译 第二步&#xff1a;添加QT生成必要的库 首先&#xff0c;建立一个新的文件夹&#xff0c;然后将Release中的可执行文件拷贝到新的文件夹中 然后&#xff0c;在新建文件夹中生成必要的库 …

设计模式---工厂模式

1.什么是设计模式 软件设计模式&#xff08;Design pattern&#xff09;&#xff0c;又称设计模式&#xff0c;是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性、程序的重用性。 …

Leetcode-每日一题【剑指 Offer 18. 删除链表的节点】

题目 给定单向链表的头指针和一个要删除的节点的值&#xff0c;定义一个函数删除该节点。 返回删除后的链表的头节点。 注意&#xff1a;此题对比原题有改动 示例 1: 输入: head [4,5,1,9], val 5输出: [4,1,9]解释: 给定你链表中值为 5 的第二个节点&#xff0c;那么在调…

Vue2:组件高级(下)

Vue2&#xff1a;组件高级&#xff08;下&#xff09; Date: May 25, 2023 Sum: 自定义指令、插槽、商品列表、动态组件 目标&#xff1a; 自定义指令 基础概念&#xff1a; 概念&#xff1a; 内置指令&#xff1a;vue 官方提供了 v-for、v-model、v-if 等常用的内置指令。…

Python练习 linux系统资源监控

yum install python3 yum -y install python3-pip yum -y install epel-release yum -y install gcc python-devel pip install --trusted-host pypi.tuna.tsinghua.edu.cn psutil 初版&#xff1a; import os import sys import time import platform import subprocess …

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);} 快速排序 思维很简单&#xff0c;类似二…

Oracle以逗号分隔的字符串拆分为多行数据实例详解

前言 近期在工作中遇到某表某字段是可扩展数据内容&#xff0c;信息以逗号分隔生成的&#xff0c;现需求要根据此字段数据在其它表查询相关的内容展现出来&#xff0c;第一想法是切割数据&#xff0c;以逗号作为切割符&#xff0c;以下为总结的实现方法&#xff0c;以供大家参…