Question

enter image description here

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

Answer 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尚未稳定。

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

1 个答案: