CSS中的一下小技巧2之CSS3動(dòng)畫勾選運(yùn)用

gaara 發(fā)布于2019-04-23 11:48 / 524人閱讀

使用CSS3實(shí)現(xiàn)動(dòng)畫勾選

　　相信大家在項(xiàng)目中會(huì)經(jīng)常遇到這種需求：勾選框。現(xiàn)在用CSS3來實(shí)現(xiàn)一個(gè)動(dòng)畫勾選，只需要一個(gè)標(biāo)簽即可完成：

　　這次需要用到CSS中偽類?after，這個(gè)小技巧也是很容易忘記的，所以決定記錄起來~

　　首先給標(biāo)簽加寬高加背景色：

<style>
    .check{
        width: 40px;
        height: 40px;
        background: palevioletred;
        position: relative;
        margin: 50px auto;
        border-radius: 5px;
        cursor: pointer;
    }
style>
<div class="check">div>

　　接下來利用偽類給標(biāo)簽添加元素，同時(shí)水平垂直居中：

<style>
    .check{
        width: 40px;
        height: 40px;
        background: palevioletred;
        position: relative;
        margin: 50px auto;
        border-radius: 5px;
        cursor: pointer;
    }
    .check:after{
        content: ";
        display: block;
        width: 14px;
        height: 10px;
        border: 3px solid #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -5px;
        margin-left: -7px;
    }
style>
<div class="check">div>

　　變成這樣：

　　接下來去掉上邊框跟右邊框，同時(shí)將剩下的旋轉(zhuǎn)45°稍微調(diào)整上下左右的距離即可~

<style>
    .check{
        width: 40px;
        height: 40px;
        background: palevioletred;
        position: relative;
        margin: 50px auto;
        border-radius: 5px;
        cursor: pointer;
    }
    .check:after{
        content: ";
        display: block;
        width: 14px;
        height: 10px;
        border: 3px solid #fff;
        border-width: 0 0 3px 3px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -8px;
        margin-left: -8px;
        transform: rotate(-45deg);
    }
style>
<div class="check">div>

　　最終效果就出來啦~

　　我們還可以添加點(diǎn)擊事件，一開始不設(shè)置顏色跟偽類，點(diǎn)擊后添加一個(gè)class，給這個(gè)class添加偽類以及動(dòng)畫效果：

<style>
    .check{
        width: 40px;
        height: 40px;
        position: relative;
        margin: 50px auto;
        border: 1px solid #ffffd;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.25s;
    }
    .checkActive{
        background: palevioletred;
        border-color: palevioletred;
    }
    .checkActive:after{
        content: ";
        display: block;
        width: 14px;
        height: 10px;
        border: 3px solid #fff;
        border-width: 0 0 3px 3px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -8px;
        margin-left: -8px;
        transform: rotate(-45deg);
    }
style>
<div class="check">div>