如何在博客动态视图模板中像这样在圆形路径中旋转图像答案

【问题标题】：How to rotate images in circular path like this in blogger dynamic view template如何在博客动态视图模板中像这样在圆形路径中旋转图像
【发布时间】：2017-03-22 00:07:33
【问题描述】：

如何在博客动态视图模板中像这样以圆形路径旋转图像当我单击圆形路径中的任何图像时，它应该打开指定的链接

【问题讨论】：

请写出到目前为止你尝试了什么。
我尝试了 html css 代码，但没有成功
Position icons into circle的可能重复
这可以在博客中使用吗（动态模板）

标签： java jquery html css

【解决方案1】：

我不能 100% 确定 blogger dynamic view template 是什么，但如果你可以编写自定义的 CSS3 + HTML 标签，下面的代码就足够了。

先截图：

它所做的基本上是无限次旋转图像，同时使图像的每个圆形图标都可点击。：

<html>
<head>
    <style type="text/css">
        @keyframes myfirst
        {
            from {transform: rotate(0deg);}
            to {transform: rotate(360deg);}
        }

        img {
            animation-name: myfirst;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 0s;
            animation-iteration-count: infinite;
            animation-direction: normal;
            animation-play-state: running;
        }
    </style>

</head>
<body>
    <img src="pic.png" usemap ="#planetmap"/>
    <map name="planetmap">
      <area shape="circle" coords="67,95,40" href="example.com"/>
      <area shape="circle" coords="177,60,40" href="example.com"/>
      <area shape="circle" coords="244,150,40" href="example.com"/>
      <area shape="circle" coords="69,211,40" href="example.com"/>
      <area shape="circle" coords="180,247,40" href="example.com"/>
    </map>
</body>
</html>

特别说明：请到 MDN 获取兼容性信息，因为 CSS3 尚未稳定。

【讨论】：