使图像映射中的区域闪烁

Question

        <map name="imagemap" title="Click Here">
            <area id="circle_1.2" shape="circle" coords="22,76,11" alt="1.2" href="#">

        </map>

我希望使用动画使特定区域闪烁或旋转。我该怎么做呢？

Answer 1

你看起来像这样：

<div class="center_image"></div>

CSS

      .center_image{
                width:200px;
                height:200px;
                background-color:red;
                -webkit-animation-name: spin;
                -webkit-animation-duration: 20000ms;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-timing-function: linear;
                -moz-animation-name: spin;
                -moz-animation-duration: 20000ms;
                -moz-animation-iteration-count: infinite;
                -moz-animation-timing-function: linear;
                -ms-animation-name: spin;
                -ms-animation-duration: 20000ms;
                -ms-animation-iteration-count: infinite;
                -ms-animation-timing-function: linear;
                 animation-name: spin;
                animation-duration: 20000ms;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
            }
            @-ms-keyframes spin {
                from { -ms-transform: rotate(0deg); }
                to { -ms-transform: rotate(360deg); }
            }
            @-moz-keyframes spin {
                from { -moz-transform: rotate(0deg); }
                to { -moz-transform: rotate(360deg); }
            }
            @-webkit-keyframes spin {
                from { -webkit-transform: rotate(0deg); }
                to { -webkit-transform: rotate(360deg); }
            }
            @keyframes spin {
                from {
                    transform:rotate(0deg);
                }
                to {
                    transform:rotate(360deg);
                }
            }