左右按钮样式

html样式：

        <!-- 上一张 -->
        <div id="last">
            <div class="bar" id="bar1"></div>
            <div class="bar" id="bar2"></div>
        </div>
        <!-- 下一张 -->
        <div id="next">
            <div class="bar" id="bar3"></div>
            <div class="bar" id="bar4"></div>
        </div>

css样式：(注：缺少父元素的相对定位)

        #last,
        #next {
            width: 40px;
            height: 40px;
            /* background-color: white; */
            border-radius: 50%;
            position: absolute;
            top: calc(50% - 40px / 2);
            /* border: 1px solid black; */
            transition: all .5s;
        }

        #last {
            left: 20px;
        }

        #next {
            right: 20px;
        }

        .bar {
            width: 4px;
            height: 20px;
            background-color: red;
            transition: all .5s;
        }

        #bar1 {
            /* 设置元素变形的原点，默认是50% 50% 围绕中心点变化 */
            transform-origin: 0 100%;
            /* transform 定义元素以什么样的状态改变、变化
                rotate 旋转   围绕Z轴旋转   deg度数  */
            transform: rotateZ(30deg);
            margin-left: 12px;
        }

        #bar2 {
            margin-left: 12px;
            transform-origin: 0 0;
            transform: rotateZ(-30deg);
        }

        #bar3 {
            transform-origin: 100% 100%;
            transform: rotate(-30deg);
            margin-left: 25px;
        }

        #bar4 {
            transform-origin: 100% 0;
            transform: rotate(30deg);
            margin-left: 25px;
        }

        #last:hover #bar1 {
            transform: rotateZ(45deg);
            background-color: purple;
        }

        #last:hover #bar2 {
            transform: rotateZ(-45deg);
            background-color: purple;
        }

        #next:hover #bar3 {
            transform: rotateZ(-45deg);
            background-color: purple;
        }

        #next:hover #bar4 {
            transform: rotateZ(45deg);
            background-color: purple;
        }

        #last:hover {
            background-color: white;
        }

        #next:hover {
            background-color: white;
        }