用css3画几个简单动效按钮

前端入坑纪 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 领红包，领到大红包的小伙伴赶紧使用哦！

支持你我，扫一扫红包