css实现gps地图导航动画效果代码-html代码-BFW代码库

css实现gps地图导航动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现gps地图导航动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
  

    <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;
        }
        
        @-webkit-keyframes driving {
          0% {
            -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(//repo.bfw.wiki/bfwrepo/svg/roads.svg);
          background-position: 50%;
          background-size: 25%;
          position: absolute;
          top: -162px;
          width: 100%;
          -webkit-transform: translateY(-650px);
                  trans.........完整代码请登录后点击上方下载按钮下载查看