一、效果介绍

在往期文章中，长沙网站建设教大家使用JavaScript制作出过非常多的效果，虽然JS的门槛不高，但如果对它不太了解的朋友，可能也很难将效果完整的实现出来。

那不使用JS能不能也做出精美的效果呢？答案是肯定的！

今天我们介绍的地图动态效果，不需要使用任何JS，只需要使用Html结合Css即可完美的实现。

二、效果显示方式

先将一张地图设置为背景，在地图上使用position 定位出很多圆点。然后将一个圆点设为中心，长沙网站制作通过SVG制作出弧形线段，并与其他圆点连接起来，这样静态的效果就已经完成，如上图所示。

当然，只有静态的地图不是我们想要的效果，我们还需要让它“动”起来。这时就需要使用到Css中的关键帧动画，来为所有弧线添加统一动态效果。

核心代码如下：

svg .st {
z-index: 1;
fill: none;
stroke-width: 1;
stroke-miterlimit: 10;
stroke-dashoffset: 1000;
stroke-dasharray: 1000;
animation: animation-line 8.5s ease-in forwards;
}
@keyframes animation-line {
0% {stroke-dashoffset: 1000;}
25% {stroke-dashoffset: 500;}
50% {stroke-dashoffset: 0;}
75% {stroke-dashoffset: 500;}
100% {stroke-dashoffset: 1000;}
}

整个动画周期设定为8.5秒，长沙网站设计通过不断改变stroke-dashoffset的值，控制弧线从隐藏，完全显示，再缩回来消失的整个动画。最终的效果是地图上的弧线会随着时间不断运动，表现出“画出 → 保持 → 缩回 → 消失” 的动态效果。

三、效果演示视频：

完整的效果如视频所示。

四、应用与扩展

一般使用在企业官网中的服务范围与业务市场板块。在此基础上可以添加各种卡片，展示国家名称，推荐图片等内容，对用户了解企业实力有很大的帮助。

以上就是长沙网站开发整理出的地图动态效果,希望对您有所帮助!

长沙蒲公英网络专业提供高效且优质的网站优化服务,为您的企业的发展保驾护航! 欢迎来电咨询:0731-84069615.