本文详细介绍了如何使用CSS3创建动画效果，通过定义和调用动画实现热点图的动态展示。内容涵盖了CSS动画的关键帧设置，以及在实际应用中需要注意的选择器权重问题。还提供了具体的代码示例和相关素材。
CSS动画分为两个步骤：
1.先定义动画
2.再调用动画
语法如下
1.定义：
@keyframs 动画名称 {
from（0%）{
}
to（100%）{
}
}
这里的数字可以从0%~100% 可以任意 代表 ：动画开始~动画结束
2.使用
div {
animation-name:动画名称（与上面的对应）;
animation-duiation：持续时间；
}
animation还有其他属性 可自己查表
案例效果图
注意的点：
在这里插入/* 保证子级在父级水平垂直居中 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);代码片
各选择器叠加的权重问题
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.map {
position: relative;
width: 747px;
height: 617px;
background:url(./素材/dt.png) no-repeat;
background-color: black;
margin: 0 auto;
}
.beijing {
最低0.47元/天 解锁文章
332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
