Как создать неоновую анимацию на листовой полилинии - PullRequest
Новая
       60

Как создать неоновую анимацию на листовой полилинии

0 голосов
/ 22 октября 2018

Я пытаюсь дать неон, как css для листовой ломаной линии, используя keyframes в css, но вывод не такой, как ожидалось.Вот ссылка на то, чего я хочу достичь [https://codepen.io/FelixRilling/pen/qzfoc].

Так что вместо тени текста в приведенной выше ссылке я хочу, чтобы непрозрачность ломаной линии увеличивалась и уменьшалась.

Вот мой код: 

    <html>
    <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" rel="stylesheet"/>

<style>
g {
  text-align: center;
  font-size: 2em;
  margin: 20px 0 20px 0;
}

path {
  text-decoration: none;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

g:nth-child(1) path {
  color: #fff;
  font-family: Monoton;
  -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -moz-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate;
}

g:nth-child(1) path:hover {
  color: #FF1177;
  -webkit-animation: none;
  -moz-animation: none;
  animation: none;
}

g path:hover {
  color: #ffffff;
}

@@-webkit-keyframes neon1 {
        from {
            stroke-opacity:0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8;
        }
        to {
            stroke-opacity:0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1;
        }
}


/*glow for mozilla*/

@@-moz-keyframes neon1 {
        from {
            stroke-opacity: 0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8;
        }

        to {
            stroke-opacity: 0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1;
        }
}


/*glow*/

@@keyframes neon1 {
        from {
            stroke-opacity: 0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8;
        }

        to {
            stroke-opacity: 0.8,0.7,0.6,0.5,0.4,0.3,0.2,0.1;
        }
}

 /*.neo {
            -webkit-animation: neon1 1.5s ease-in-out infinite alternate !important;
            -moz-animation: neon1 1.5s ease-in-out infinite alternate !important;
            animation: neon1 1.5s ease-in-out infinite alternate !important;
        }*/
</style>

    </head>
    <body>
    <div id="map">

    </div>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>
    <script type="text/javascript">

    var route=[[56.1551635, 10.2389301], [56.1615487, 10.2462907], [56.1477235, 10.2771113], [56.0868179, 10.5223309], [56.0684228, 10.5732606], [56.0405003, 10.7359413], [56.0576071, 10.9101541], [56.0175633, 11.0338073], [56.0003196, 11.035005], [55.9476612, 10.9905792], [55.9254847, 10.9484167], [55.9122174, 10.9294308], [55.8289333, 10.8093333], [55.7603218, 10.8030243], [55.6457129, 10.7728475], [55.5099516, 10.8668377], [55.3669002, 11.0304027], [55.3151167, 11.0302333], [55.2291667, 11.0975], [55.205, 11.0958333], [55.1633333, 11.0033333], [55.145, 10.9908333], [55.0766667, 10.9891701], [55.0641667, 10.9983333], [55.0333333, 10.9966667], [54.9725, 10.9666667], [54.9408332, 10.8858333], [54.8766667, 10.8383333], [54.8041667, 10.8333333], [54.7366667, 10.7791667], [54.6791667, 10.7708333], [54.5875, 11.0166667], [54.5816667, 11.2], [54.4091667, 11.8183333], [54.409711, 12.1475482], [54.4583333, 12.2116667], [54.575, 12.275], [54.7608333, 12.7416667], [54.7758942, 12.8328614], [54.7517401, 13.563567], [54.590434, 14.383967], [54.7735972, 16.4815564], [54.8161654, 16.903964], [54.9748198, 17.909823], [54.97485, 18.6091], [54.8538037, 18.9356152], [54.6190664, 19.0788607], [54.4461144, 18.9368133], [54.4313249, 18.8859516], [54.4182, 18.8290833], [54.3994734, 18.7199814], [54.38785, 18.7193833]]

        //........map.......
        var map = new L.map('map', {
            zoomControl: false,
            center: [18, 11],
            zoom: 2,
            worldCopyJump: true
        });

    var mainLayer = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
            maxZoom: 19,
            minZoom: 1,
            attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
        });
        mainLayer.addTo(map);

        var line = L.polyline(route, { color: '#AEFF14'/*,className:'neo'*/ });

        line.addTo(map);
        </script>
    </body>
    </html>

Если мой подход неверен, скажите мне.Если я пытаюсь что-то невозможное, скажи мне.

...