Question

此代码用于在点击该图标时旋转箭头向上方向。我想在点击图标外侧时将其旋转回来，我还想在点击图标并点击外部时重复此过程图标。

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="troll.css">
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="../project/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="../project/style.css" />
        <link rel="stylesheet" type="text/css" href="../project/font-awesome-4.2.0/css/font-awesome.min.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script>
            function rotate(){
                document.getElementById("me").className="spinner fa fa-caret-down";
            }
        </script>
    </head>
    <body>
        <i onclick="rotate()" id="me" class=" fa fa-caret-down "></i>
    </body>
</html>

关联的css：

.spinner {
  -webkit-animation:spin 0.5s linear 1;
  -moz-animation:spin 0.5s linear 1;
  animation:spin 0.5s linear 1;
  animation-fill-mode: forwards; 
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(180deg);
  }
}
-webkit-keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(180deg);
  }
}

我想在点击外面时使图标旋转回来

0 个答案: