缓冲动画谷歌地图不显示

我在谷歌地图上做了一个缓冲动画。当我在我的网页上运行它没有工作。我使用javascript和php来制作它。

这是我的PHP代码:

<html>    
    <head>
        <title>Google Map</title>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD21hdItqZ1Rba2uU8z9i922vPFp5DgdzE&sensor=false"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var map;
                var mycity = new google.maps.LatLng(51.5120, -0.12);
                var bigOne = new google.maps.LatLng(51.5120, -0.12);
                var smallOne = new google.maps.LatLng(51.5120, -0.12);
                var options = {
                    zoom: 14,
                    center: mycity,
                    scaleControl: true,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map($('#map')[0], options);
                var myCity = new google.maps.Circle({
                    center: bigOne,
                    radius: 150,
                    strokeColor: "#E16D65",
                    strokeWeight: 2,
                    fillColor: "#E16D65",
                    fillOpacity: 0
                });
                var smallcircle = new google.maps.Circle({
                    center: smallOne,
                    radius: 300,
                    strokeColor: "#E16D65",
                    strokeOpacity: 1,
                    strokeWeight: 2,
                    fillColor: "#E16D65",
                    fillOpacity: 0
                });
                myCity.setMap(map);
                smallcircle.setMap(map);
            });
        </script>
        <style type="text/css">
            #animation {
                position: relative;
                width: 100%;
                height: 200px;
                background: #EEE;
            }
            #map {
                height: 400px;
                width: 100%;
            }
            .dot {
                position: absolute;
                top: 80px;
                left: 150px;
                background: #00C0FF;
                box-shadow: 1px 0 2px 0 rgba(0, 0, 0, .5);
                height: 0;
                width: 0;
                padding: 4px;
                border-radius: 5000px;
            }
            .dot:before, .dot:after {
                position: absolute;
                content:" ";
                border-radius: inherit;
                height: 0px;
                width: 0px;
                box-shadow: 0 0 2px 2px #FF0000;
                transform: translate(-50%, -50%);
                animation: pulseInner 2s infinite ease-out;
            }
            .dot:after {
                height: 7px;
                width: 7px;
                box-shadow: 0 0 4px 2px #FFFF00;
                animation: pulseOuter 2s infinite ease-out;
            }
            @-webkit-keyframes {
                0% {
                    height: 0;
                    width: 0;
                    opacity: 0;
                }
                20% {
                    opacity: 1
                }
                95% {
                    height: 125px;
                    width: 125px;
                    opacity: 0.25;
                }
                100% {
                    opacity: 0;
                }
            }
            @-moz-keyframes {
                0% {
                    height: 0;
                    width: 0;
                    opacity: 0;
                }
                20% {
                    opacity: 1
                }
                95% {
                    height: 125px;
                    width: 125px;
                    opacity: 0.25;
                }
                100% {
                    opacity: 0;
                }
            }
            @keyframes pulseInner {
                0% {
                    height: 0;
                    width: 0;
                    opacity: 0;
                }
                20% {
                    opacity: 1
                }
                95% {
                    height: 125px;
                    width: 125px;
                    opacity: 0.25;
                }
                100% {
                    opacity: 0;
                }
            }
            @-webkit-keyframes {
                0% {
                    height: 7px;
                    width: 7px;
                    opacity: 0;
                }
                20% {
                    opacity: 1
                }
                100% {
                    height: 250px;
                    width: 250px;
                    opacity: 0.25;
                }
            }
            @-moz-keyframes {
                0% {
                    height: 7px;
                    width: 7px;
                    opacity: 0;
                }
                20% {
                    opacity: 1
                }
                100% {
                    height: 250px;
                    width: 250px;
                    opacity: 0.25;
                }
            }
            @keyframes pulseOuter {
                0% {
                    height: 7px;
                    width: 7px;
                    opacity: 0;
                }
                20% {
                    opacity: 1
                }
                100% {
                    height: 250px;
                    width: 250px;
                    opacity: 0.25;
                }
            }
        </style>
    </head>    
    <body>
        <div id="animation">
            <div class="dot"></div>
        </div>
        <hr>
        <div id="map"></div>
    </body>    
</html>

我不知道是什么问题。我的网没有结果。有人能帮帮我吗?谢谢你

你的代码中有许多语法相关的问题。工作演示:http://jsfiddle.net/GCu2D/202/

您忘记在-moz-keyframes和-webkit-keyframes中添加动画名称了
您没有添加浏览器特定的css动画规则，如-webkit-animation和-moz-animation。transition和transform的css属性
您错过了关闭style标签。我不确定您是否在实际代码中错过了相同的内容

关于animation syntax的更多细节，可以参考动画语法

相关内容

最新更新

热门标签：