前端入坑紀 65

今天來分享 幾個一直想要去畫的按鈕，然后上面有些簡單的動畫。

好，詳解如下！

OK，first things first！ 點我查看實際效果

線條按鈕

HTML 結構

    <span class="close_button"></span>
    <span class="add_button"></span>
    <span class="delete_button"></span>
    <span class="arrow_button"></span>

用四個span來做按鈕，所以display:inline-block

CSS 結構

       .close_button{
        display: inline-block;
        padding: 17px;
        border: 1px solid #ccc;
        overflow: hidden;
        position: relative;
        border-radius: 50%
    }
    .close_button::after,.close_button::before{
        content: "";
        width: 60%;
        height: 0;
        border-bottom: 1px solid #999;
        position: absolute;
        top:50%;
        left: 20%;
        transition: transform 300ms ease-out
    }
    .close_button::after{
        transform: rotateZ(45deg)
    }
    .close_button::before{
        transform: rotateZ(-45deg)
    }
    .close_button:hover{
        cursor: pointer;
    }
    .close_button:hover::after{
        transform: rotateZ(-45deg)
    }
    .close_button:hover::before{
        transform: rotateZ(45deg)
    }

    /* add_button */
    .add_button{
        display: inline-block;
        padding: 17px;
        border: 1px solid #ccc;
        overflow: hidden;
        position: relative;
        border-radius: 50%
    }
    .add_button::after,.add_button::before{
        content: "";
        width: 60%;
        height: 0;
        border-bottom: 1px solid #999;
        position: absolute;
        top:50%;
        left: 20%;
        transition: transform 300ms ease-out
    }
    .add_button::after{
        transform: rotateZ(0)
    }
    .add_button::before{
        transform: rotateZ(-90deg)
    }
    .add_button:hover{
        cursor: pointer;
    }
    .add_button:hover::after{
        transform: rotateZ(360deg)
    }
    .add_button:hover::before{
        transform: rotateZ(450deg)
    }
    /* delete_button */
    .delete_button{
        display: inline-block;
        padding: 17px;
        border: 1px solid #ccc;
        overflow: hidden;
        position: relative;
        border-radius: 50%
    }
    .delete_button::before{
        content: "";
        width: 60%;
        height: 0;
        border-bottom: 1px solid #999;
        position: absolute;
        top:50%;
        left: 20%;
        transition: transform 300ms ease-out
    }
    .delete_button::before{
        transform: rotateZ(0) scale(1,1)
    }
    .delete_button:hover{
        cursor: pointer;
    }
    .delete_button:hover::before{
        transform: rotateZ(180deg)  scale(1.3,1.8)
    }

    /* arrow_button */
    .arrow_button{
        display: inline-block;
        padding: 17px;
        border: 1px solid #ccc;
        overflow: hidden;
        position: relative;
        border-radius: 50%;
        transition: transform 300ms ease-out

    }
    .arrow_button::before{
        content: "";
        display: block;
        width: 0;
        height: 0;
        padding: 20%;
        border-top: 1px solid #999;
        border-left: 1px solid #999;
        position: absolute;
        top:50%;
        left: 60%;
        transform:rotateZ(-45deg) translateY(-70%)
    }
    .arrow_button:hover{
        cursor: pointer;
        transform: scale(1.2)
    }

所有的動作效果都是通過transform和transition結合來實現。這些按鈕里面的線條則是通過偽元素的定位不同來實現。

總結

諸如簡單的一些線條類的按鈕可以這么操作，如果是偏復雜的圖線，那就得改用別的套路了。比如SVG之類的操作。

好了，到此，本文告一段落！感謝您的閱讀！祝你身體健康，闔家幸福！

*****作者原創內容,大家互相支持,謝謝!!!*****

打開支付寶首頁搜 625097528 領紅包，領到大紅包的小伙伴趕緊使用哦！

支持你我，掃一掃紅包