CSS动画：菜单小箭头旋转效果-CSDN博客

今天练手了一个简单的小案例，就是手指hover住菜单的时候，菜单旁边的小箭头旋转180度。

用到了transform变形中rotate()旋转和transition过渡中animation动画的知识点。

怎么让鼠标hover住的时候箭头不会变回原样呢，这时要使用属性：

animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画练习1</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: darkcyan;
        }
        .wrapper{
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: sandybrown;
        }
        .wrapper img{
            width: 30px;
            height: 30px;
        }
        .wrapper:hover img{
            animation:move 1s;
            animation-fill-mode:forwards;
        }
        
        @keyframes move {
            0%{
              transform: rotate(0deg);
            }
            100%{
              transform: rotate(180deg);
            }
        }
    </style>
</head>
<body>
<div class="wrapper">
  <img src="./image/jiantou.png"  alt="">
</div>
</body>
</html>

菜单箭头旋转180度