CSS中的一下小技巧2之CSS3動畫勾選運用

使用CSS3實現動畫勾選

---

　　相信大家在專案中會經常遇到這種需求：勾選框。現在用CSS3來實現一個動畫勾選，只需要一個標籤即可完成：

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

　　首先給標籤加寬高加背景色：

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

　　

　　接下來利用偽類給標籤新增元素，同時水平垂直居中：

　　

<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>

 

 

　　變成這樣：

　　

　　接下來去掉上邊框跟右邊框，同時將剩下的旋轉45°稍微調整上下左右的距離即可~

　　

<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>

　　

　　最終效果就出來啦~

　　我們還可以新增點選事件，一開始不設定顏色跟偽類，點選後新增一個class，給這個class新增偽類以及動畫效果：

　　

<style>
    .check{
        width: 40px;
        height: 40px;
        position: relative;
        margin: 50px auto;
        border: 1px solid #ddd;
        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>

　　這樣就完成啦！

作者：市民朱先生

原文連結：https://www.cnblogs.com/zhujunye/p/10451539.html