如何設置此CSS動畫複選框的樣式？

我有這個複選框，它需要這個動畫檢查後，請大家看視頻：https://www.youtube.com/watch?v=lUAccdEOrV8&feature=youtu.be 如何設置此CSS動畫複選框的樣式？

我想這下面，但我不能拿到角球圓，再加上，我已經申請了不透明度也複選框。

#subsDiv input[type="checkbox"]{ 
    appearance: none; 
    background-color: transparent; 
    border: 1px solid white; 
    padding: 12px; 
    border-radius: 6px; 
    display: inline-block; 
    vertical-align: top; 
    margin-left: 0px; 
    outline: none; 
} 

#subsDiv input[type="checkbox"]:hover { 
    border-color: #609de6; 
} 

#subsDiv input[type="checkbox"]:checked { 
    outline: none; 
    background-position: 0px -24px; 
    background-image: url(../img/check.png); 
    border-color: #4a90e2; 
    animation-name: checkbox; 
    animation-duration: 400ms; 
} 


@keyframes checkbox { 
    from{opacity: 1 ;outline: 2px solid #4a90e2; outline-offset: 0px;} 
    to{opacity: 0 ;outline: 2px solid #4a90e2; outline-offset: 10px;} 
}

來源

2017-07-02 dg2903

這很簡單，但你需要證明你做某種工作。給它一個鏡頭，如果你無法弄清楚，用一些代碼發表帖子，告訴我們你卡在哪個部分。 –

請看看我的代碼 – dg2903

謝謝，提交了一個答案 –

你可以用僞元素轉變的背景下，不透明度和transform: scale()創建爆炸了，當您單擊/勾選小邊框效果做到這一點。

.cbl { 
 
    display: block; 
 
    cursor: pointer; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    position: relative; 
 
    transition: background .5s; 
 
} 
 
.cb { 
 
    display: none; 
 
} 
 
.cb:checked + .cbl { 
 
    background: blue; 
 
} 
 
.cb:checked + .cbl::after { 
 
    content: '\2713'; 
 
    color: white; 
 
} 
 
.cbl::before { 
 
    content: ''; 
 
    position: absolute; 
 
} 
 
.cbl, .cbl::before { 
 
    width: 1em; height: 1em; 
 
    border-radius: .25em; 
 
    border: 1px solid blue; 
 
} 
 
.cb:checked + .cbl::before { 
 
    transform: scale(2); 
 
    opacity: 0; 
 
    transition: transform .5s, opacity .5s; 
 
}

<input type="checkbox" class="cb" id="cb"> 
 
<label class="cbl" for="cb"></label>

來源

2017-07-03 02:05:42

如何設置此CSS動畫複選框的樣式？

回答

相關問題