CSS3书写GPS地图导航定位动画特效

2025-11-29 18:23:58

1、新建html文档。

CSS3书写GPS地图导航定位动画特效

2、书写svg代码。

viewBox="0 0 650 650" style="enable-background:new 0 0 650 650;" xml:space="preserve">

.st0{fill:none;stroke:#FBC8FF;stroke-width:2;}

.st1{fill:none;stroke:#7034E2;stroke-width:3;}

</style>

<path id="road" class="st0" d="M650,366H0 M83,0v650 M178,366v284 M178,0v165.5 M439,0v201.5c0,2.2-1.8,4-4,4H83 M439,467.5V650

M82.5,484.2l288,100.1 M370.5,623H561"/>

<path id="road_3_" class="st1" d="M561.5,0v222c0,3.3-2.3,7.4-5.2,9L375.7,335.5c-2.9,1.6-5.2,5.7-5.2,9V650 M370.5,0v85.5

c0,3.3-2.7,6-6,6H0 M562,91.5h88 M53.5,650V440c0-3.3,1.9-7.9,4.3-10.2l64.4-63.5 M122.5,301.5V650 M53,467H0"/>

</g>

</svg>

CSS3书写GPS地图导航定位动画特效

3、书写hmtl代码。

</div>

<h1 class="hero__title"> animated GPS地图的背景 </h1>

</header>

CSS3书写GPS地图导航定位动画特效

4、书写css代码。

<style>

* { padding: 0; margin: 0; box-sizing: border-box; -webkit-transition: all 0.25s cubic-bezier(0.37, 0, 0.45, 0.99); transition: all 0.25s cubic-bezier(0.37, 0, 0.45, 0.99); }

*:before, *:after { box-sizing: inherit; }

img { max-width: 100%; height: auto; }

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Helvetica Neue", sans-serif; line-height: 1.75; background-color: #fafafa; }

</style>

CSS3书写GPS地图导航定位动画特效

5、书写css3代码。

-webkit-transform: translateY(-650px);

transform: translateY(-650px);

}

100% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

@keyframes driving { 0% {

-webkit-transform: translateY(-650px);

transform: translateY(-650px);

}

100% {

-webkit-transform: translateY(0);

transform: translateY(0);

}

.hero__title { padding: 3em 2rem 16rem; text-align: center; color: #080314; position: relative; z-index: 0001; }

.gps-bg { background-color: #ac8dff; position: relative; -webkit-perspective: 500px; perspective: 500px; overflow: hidden; }

.gps-bg:after { content: ''; background-color: #fafafa; position: absolute; width: 200%; height: 5em; bottom: 0; -webkit-transform: skewY(-2deg); transform: skewY(-2deg); }

.gps-bg__guts { position: absolute; -webkit-transform: rotateX(45deg); transform: rotateX(45deg); width: calc(100% + 1000px); height: 100%; left: -500px; }

.gps-bg__bg { height: 1300px; background-image: url(img/roads.svg); background-position: 50%; background-size: 25%; position: absolute; top: -162px; width: 100%; -webkit-transform: translateY(-650px); transform: translateY(-650px); -webkit-animation: driving 10000ms linear 0ms infinite; animation: driving 10000ms linear 0ms infinite; }

.gps-bg__route { width: 2em; background-color: #fff; position: absolute; top: -162px; bottom: -162px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); box-shadow: 0 0 13px 5px rgba(46, 18, 107, 0.25); }

.gps-bg__route:after { content: ''; width: 60%; background-color: #6c38de; position: absolute; top: 0; bottom: 35%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }

.gps-bg__fade { background-image: -webkit-linear-gradient(top, #ac8dff 10%, rgba(172, 141, 255, 0) 100%); background-image: linear-gradient(to bottom, #ac8dff 10%, rgba(172, 141, 255, 0) 100%); position: absolute; top: 0; left: 0; width: 100%; height: 60%; z-index: 1; }

.gps-bg__marker { height: 6em; width: 6em; background-color: #fff; border-right: 1px solid #ddd; border-bottom: 3px solid #ddd; border-left: 1px solid #ddd; border-radius: 100%; position: absolute; top: 60%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); box-shadow: 0 0.125em 10px 3px rgba(46, 18, 107, 0.25); }

.gps-bg__marker:after { content: ''; border-left: 1.5em solid transparent; border-right: 1.5em solid transparent; border-bottom: 3em solid #6c38de; position: absolute; top: 20%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }</style>

CSS3书写GPS地图导航定位动画特效

6、代码整体结构。

CSS3书写GPS地图导航定位动画特效

7、查看效果。

CSS3书写GPS地图导航定位动画特效

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。