js点击箭头旋转的实现

原创

已于 2022-07-29 19:02:58 修改 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2022-07-29 19:00:33 首次发布

我们经常可以在网页中看到向下的箭头，并且在我们点击时，箭头会发生旋转，这又是如何做到的呢？我们来看一看，先上效果图：

可以看到，在点击箭头时，箭头的方向旋转了，并且再次点击回到原来的样子，我们看一看代码：

首先是html样式

    <header>
        <div class="nav">
            <button title="应用启动器"><i class="fa fa-bars"></i></button>
            <span class="user"><a href="">Microsoft 帐户</a></span>
            <span class="wrapper-1">|</span>
            <div class="middle-nav">
                <ul>
                    <li><a href="">你的信息</a></li>
                    <li><a href="">隐私</a></li>
                    <li><a href="">安全</a></li>
                    <li class="dropdown-item"><a href="javascript:;" onclick="appearBox()">付款和计算 <i