HTML——3D动画 热点图
发布日期:2021-06-29 11:16:31
浏览次数:2
分类:技术文章
本文共 2339 字,大约阅读时间需要 7 分钟。
利用H5和C3制作热点图。
一、概念
3D动画
1.定义动画 @keyframes move{ 开始状态 0%{ transform:translateX(0px) } 结束状态 100%{ transform:translateX(100px) } } 2.使用动画 div{ 动画名字 animation-name:move; 持续时间 animation-duration:2s; } 3.常用属性 ①动画名称(必须)animation-name ②持续时间(必须)animation-duration ③运动曲线(默认ease)animation-timing-function ④何时开始(默认0)animation-delay ⑤重复次数(默认0)animation-iteration-count ⑥是否逆向播放(默认normal)animation-direction;反方向选alternate ⑦动画结束后停止(默认backwards)animation-fill-mode;停下选forwards ⑧播放状态——这个写在:hover里。(默认running)animation-play-state;鼠标放在上面就会停止选paused 4.简写属性: animation:动画名称 持续时间 运动曲线 何时开始 重复次数 是否逆向播放 动画结束播放状态
二、效果
视觉效果上一个点从中心向四周在不断发光。三、思路
- 先做一个盒子放置背景图片
- 设置一个子盒子用于定位
- 在子盒子里再设置四个盒子,一个设置圆,另外三个设置发散的波纹
- 波纹用阴影制作会更有美感
- 波纹放大用width和height设置,不要用scale,会把阴影也撑大,影响美感
四、实践
- 先设置一个父盒子map,用背景方式放入地图
html
CSS
.map { position: relative; width: 1600px; height: 1022px; background: url(image/map.jpg) no-repeat;}
- 设置子盒子.city,用于为后面的盒子定位(记得给父盒子设置相对定位,子绝父相)
html
CSS
.city { position: absolute; top: 226px; left: 333px;}
- 设置孙盒子.dotted,设置宽高、背景颜色,模拟城市圆点
html
CSS
.map .dotted { width: 40px; height: 40px; border-radius: 50%; background-color: purple;}
- 利用宽高和不透明度设置发散的动画效果
CSS@keyframes plus { 0% {} 70% { width: 90px; height: 90px; opacity: 1; } 100% { width: 110px; height: 110px; opacity: 0.4; }}
- 设置三个.plus盒子,设置宽高、阴影,引用动画效果,设置匀速、重复播放
html
CSS
.map div[class^="plus"] { /* 1-4步是为了保证波纹在父盒子里水平垂直居中,放大后才能中心向四周发散 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 12px purple; animation: plus 2s linear infinite;}
*这里利用结构伪类选择器能更方便选取三个波纹盒子*但是我们会发现效果并没有像我们所想的那样,三个波纹有次序的一个一个散开,而是叠加在一起。仔细排查我们可以找到答案——三个波纹盒子引用的是同一个动画效果,并没有设置延迟时间,因此他们同时运动。
- 设置延迟时间
CSS
.map .city .plus2 { animation-delay: 0.6s;}.map .city .plus3 { animation-delay: 1.2s;}这样效果就能显示出来了
五、注意事项
- 设置三个波纹盒子时,要记得为其赋予绝对定位,使得能够实现水平垂直居中。居中效果可利用2D效果——transform: translate(X, Y);实现。
- 在设置波纹盒子的延迟时间时,注意优先级。
如果改为以下代码,则不会出现层次效果。
.plus2 { animation-delay: 0.6s;} .plus3 { animation-delay: 1.2s;}
原因是他们是类选择器,优先级为10;原来的如下所示,优先级为21,因此效果不会实现。
.map div[class^="plus"] {}
转载地址:https://blog.csdn.net/zx2014567296/article/details/116143491 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
第一次来,支持一个
[***.219.124.196]2024年04月25日 13时10分09秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
漫画:程序员相亲?哈哈哈哈哈哈
2019-04-29
30种EMC标准电路分享,再不收藏就晚了!
2019-04-29
这100道Linux常见面试题,看看你会多少?
2019-04-29
十年硬件老司机,结合实际案例,带你探索单片机低功耗设计!
2019-04-29
“2020年嵌入式软件秋招经验和对嵌入式软件未来的一点思考”
2019-04-29
嵌入式的坑在哪方面?
2019-04-29
三种常见嵌入式设备通信协议
2019-04-29
硬核,这个充电宝居然烧煤气!
2019-04-29
什么是模块化代码?如何写?
2019-04-29
STM32串口发送数据和接收数据方式总结
2019-04-29
来,看看这20个常用的宏定义!
2019-04-29
嵌入式开发中常用的几种通信接口总结
2019-04-29
为什么我那么努力,模电还是学不懂?
2019-04-29
PID系统稳定性与零极点的关系
2019-04-29
什么?电路板上还要喷漆?
2019-04-29
读博读废了是种什么样的体验?
2019-04-29
2020年,技术圈十大“翻车”事件!
2019-04-29
C语言状态机编程思想
2019-04-29
为什么很多电器设备都要使用单片机?
2019-04-29
在中国做操作系统研发 20 年是种什么体验?
2019-04-29