css3动态小地图

最新推荐文章于 2022-12-20 09:55:31 发布
最新推荐文章于 2022-12-20 09:55:31 发布
阅读量470 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42453950/article/details/80698658
版权

css3小地图：

  一般先想好、 布局思路。（或者先写着最后在修改）

<div class="bj">
    <div class="jb">
      <div class="bb"><p></p><span></span></div>
      <div class="bb1"><p></p><span></span></div>
      <div class="bb2"><p></p><span></span></div>
      <div class="bb3"><p></p><span></span></div>
      <div class="bb4"><p></p><span></span></div>
      <div class="bb5"><p></p><span></span></div>
在设定内联样式：（ 背景图片的大小） 
 .bj{width: 100%;height: auto;background:url(img/2.jpg)center no-repeat;}
	  .bj .jb{width:700px;height: 700px; background:url(img/1.png)center no-repeat;position: relative;left: 500px;}
确定小圆位置和大小 
bj .jb div{background:#009FD9;width: 10px;height: 10px;border-radius:50%;position: relative;}
	.bj .jb p{position: absolute;top:-15px; width: 10px;height: 10px;border-radius:50%;animation: myfirst 3s  infinite;box-shadow: 0px 0px 1px #009FD9; }
	.bj .jb span{position: absolute;display:block;width: 10px;height: 10px;border-radius:50%;animation: myfirst 3s infinite;box-shadow: 0px 0px 1px #009FD9; animation-delay:0.7s;}
动漫格式： （opacity是透明度） 
@keyframes myfirst{
			20% {transform: scale(2); opacity: 0.5}
			40% {transform: scale(3);opacity: 0.6}
			60% {transform: scale(4);opacity: 0.7}
			80% {transform: scale(5);opacity: 0.8}
			100% {transform: scale(6);opacity: 0.9}
 @keyframes quan4 {
            0%{transform: scale(0);opacity: 1;}
            100%{transform: scale(1);opacity: 0;}
最后就是：（复制多个样式） 
.bj .jb .bb{position: absolute;left:600px; top:100px;}
     .bj .jb .bb1{position: absolute;left: 320px;top: 350px;}
     .bj .jb .bb2{position: absolute;left:420px;top: 420px;}
     .bj .jb .bb3{position: absolute;left:500px;top: 300px;}
     .bj .jb .bb4{background:yellow;position: absolute;left:350px;top:400px;}
     .bj .jb .bb5{background:red;position: absolute;left:480px;top:380px;}

整体

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
	  .bj{width: 100%;height: auto;background:url(img/2.jpg)center no-repeat;}
	  .bj .jb{width:700px;height: 700px; background:url(img/1.png)center no-repeat;position: relative;left: 500px;}
	.bj .jb div{background:#009FD9;width: 10px;height: 10px;border-radius:50%;position: relative;}
	.bj .jb p{position: absolute;top:-15px; width: 10px;height: 10px;border-radius:50%;animation: myfirst 3s  infinite;box-shadow: 0px 0px 1px #009FD9; }
	.bj .jb span{position: absolute;display:block;width: 10px;height: 10px;border-radius:50%;animation: myfirst 3s infinite;box-shadow: 0px 0px 1px #009FD9; animation-delay:0.7s;}
     .bj .jb .bb{position: absolute;left:600px; top:100px;}
     .bj .jb .bb1{position: absolute;left: 320px;top: 350px;}
     .bj .jb .bb2{position: absolute;left:420px;top: 420px;}
     .bj .jb .bb3{position: absolute;left:500px;top: 300px;}
     .bj .jb .bb4{background:yellow;position: absolute;left:350px;top:400px;}
     .bj .jb .bb5{background:red;position: absolute;left:480px;top:380px;}


	@keyframes myfirst{
			20% {transform: scale(2); opacity: 0.5}
			40% {transform: scale(3);opacity: 0.6}
			60% {transform: scale(4);opacity: 0.7}
			80% {transform: scale(5);opacity: 0.8}
			100% {transform: scale(6);opacity: 0.9}
	</style>
</head>
<body>
  <div class="bj">
    <div class="jb">
      <div class="bb"><p></p><span></span></div>
      <div class="bb1"><p></p><span></span></div>
      <div class="bb2"><p></p><span></span></div>
      <div class="bb3"><p></p><span></span></div>
      <div class="bb4"><p></p><span></span></div>
      <div class="bb5"><p></p><span></span></div>
      

    </div>
  </div>
</body>
</html>

学到的: opacity; animation-duration 整体速度2s animation-delay 延迟




qq_42453950
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS实现地图中定位的波动效果
u011848617的专栏
10-30 1456
地图中的定位效果： 看到这么酷炫的效果，你是不是很想知道是怎么做到的？ Step 1 创建一个container div，并选取一张地图背景图片，CSS设置如下： #container { position:relative; width: 600px; height: 500px; background: url(map.jpg); } 这里有...
CSS3 SVG地图路线轨迹特效
07-24
CSS3 SVG地图路线轨迹特效是一款css3基于svg制作的默认设置地图路线轨迹，通过点击按钮动态显示地图路线轨迹定位特效。
css样式 插入地图插件
jack_rose_me的博客
12-16 414
<div id="mapContainer" style={{ position: "absolute", top: "0", bottom: "0", width: "100%", zIndex: 1 }}></div>
html如何加载游戏地图,HTML+CSS3 实现游戏中的小世界地图
weixin_39747615的博客
05-31 378
做一个地图产品，需要做小地图，效果如下： 代码如下：* {margin: 0;padding: 0;}.main {position: relative;width: 300px;height: 300px;overflow: hidden;margin: 20px auto;border: #000 solid 1px;}.out {width: 300px;height: 300px;bac...
CSS3地图活跃热点布局动画特效特效代码
03-20
【CSS3地图活跃热点布局动画特效特效代码】是一种利用CSS3的强大功能来创建动态视觉效果的技术，主要应用于网站设计和开发中。这个特效的核心在于利用CSS3的`animation`属性来实现地图上特定区域（热点）的动态效果...
纯CSS3点像素世界地图特效
07-24
3. **关键帧动画（@keyframes）**：此特效可能应用了CSS3的关键帧动画来实现地图的动态效果，比如地图的加载过程、点击后的视觉反馈等。通过定义动画的不同阶段，可以控制像素地图随时间的变化，增加互动性和吸引力...
CSS3仿GPS地图导航定位动画特效.zip
07-13
【CSS3】是 Cascading Style Sheets 的第三版，是...总之，这个CSS3仿GPS地图导航定位动画特效展示了CSS3在构建动态、交互式UI方面的强大能力。通过深入研究和实践，开发者可以进一步提升网页设计的创新性和用户体验。
使用CSS3设计地图上的雷达定位提示效果
09-24
在本文中，我们将探讨如何利用CSS3来设计地图上的雷达定位提示效果，即创建一个具有水波涟漪动画效果的指示器。这个效果通过CSS3的`animation`、`transition`以及`@keyframes`属性实现，使得定位标识更加生动且吸引...
纯CSS3地图位置标记动画特效特效代码
03-20
这个特效代码旨在提供一个无需JavaScript插件或额外脚本的解决方案，通过纯CSS3实现地图上的动态位置标记。 首先，让我们深入了解一下CSS3。CSS（层叠样式表）是用于描述HTML或XML（包括SVG、MathML等各种XML方言）...
中国省份地图CSS实现
08-08
中国省份地图CSS实现.rar
css创建一个真正的地图标点
最新发布
weixin_35753291的博客
12-20 459
在 HTML 中创建地图标点通常是使用 元素和 元素。 首先，你需要在 HTML 文档中插入一个 元素，并为它指定一个名称，例如： <map name="myMap"> </map> 然后，你可以在 元素内插入多个 元素，来指定地图中的各个区域。每个 元素都有一个 shape 属性和一个 coords 属性，用于指定区域的形状和坐标。 例如，你可以使用以下代码...
HTML+CSS3 实现游戏中的小世界地图
孤鸿寄语
01-16 2142
做一个地图产品，需要做小地图，效果如下： 代码如下： * { margin: 0; padding: 0; } .main { position: relative; width: 300px; height: 300px; overflow: hidden; margi
CSS实现地图（一）
littleOneYuan的博客
06-17 1862
目录实现效果实现思路结构代码数据代码逻辑代码样式代码 实现效果 实现思路 用地图图片作为底图 点击坐标之后高亮该区域，高亮区域也用图片定位实现 坐标和高亮图片都以地图为基准定位 注意：坐标和高亮图片都放在地图的div里面，而该DIV由地图撑开宽高，这样该div的宽高就是地图的宽高了，所有定位元素的left和top都是相对于地图了，这样就不会因为地图变大变小而使定位元素定位不准确 结构代码 这里Group.png是你的地图图片 point_arr存放坐标元素 cur_p是你当前点击的坐标（省份） 所有
css3动画-地图热点图案例
qq_45478564的博客
09-17 327
CSS3动画案例之热点图
CSS Image Map —— CSS图片地图
Sornets' Blog
07-14 2914
记得在刚刚学习CSS的时候，博主曾经也顺带着学习过CSS Image Map技术，就是通过那几个标签来实现。当时博主作为一个前端小白都感觉出这个方法的繁琐，相信大家在需要做图片地图功能的时候也不喜欢这样做。 今天我就总结一下前一段时间在实习中学习到的一个完成CSS图片地图的思路。 What is 图片地图 ? 可能还有一些朋友不知道图片地图是什么，我就简短的解释一下： 图片
【CSS】用CSS绘制图标（图标大全）
热门推荐
码婆Doph
11-25 2万+
转载请务必注明出处，也不枉我这么辛苦打上来。谢谢啦！ 技艺不精，若有纰漏，还请不吝指出。 暂停按钮 <style> .box{ width: 50px; height: 50px; background-color: white; border: 1px solid blac
CSS3地图热点区域动画的两种方法
m0_37058714的博客
06-14 3643
第一种方法：在某个热点的外围添加一定宽度的阴影，利用动画使每个热点放大一定量的倍数(倍数不能太大，要紧凑)，这时在热点外围用伪元素作用的阴影就会随着热点的放大而进行放大，从而达成一定的效果。①建立动画 @keyframes mydot{ 0%{ transform: scale(1); } 10%{ transform: s...
CSS3地图动态实例（圆圈向外扩散）
吉帅振博客
06-14 8273
实例效果图实例说明：在地图上定位多个不同的点，然后从点中央向外扩散光圈。实例要点：主要考察CSS3中动画的使用主要代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;地图&lt;/title&gt; &lt;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值