今天試著用css3的animation動畫製作元素被選中時的打對勾效果，顯示效果如下：
思路：首先將一個label元素與多選框綁定，並將其設置為圓形，然後給它的偽元素:before和:after進行定位和旋轉，形成對勾形狀（向外的對勾添加陰影，使其與圓形相交處形成缺口）。最後將該label元素的偽元素:before和:after高度設置為0，當選中多選框時執行動畫，形成打對勾的效果。
第一步，添加html：
<input type="checkbox" id="checkbox" />
<label class="yes-content" for="checkbox">
<div class="yes"></div>
<span>用css製作選中打對勾效果</span>
</label>
第二步，將label元素設置為圓形，checkbox隱藏：
第三步，將label元素的偽元素:before和:after進行定位和旋轉：
第四步，選中多選框時，為label元素的偽元素:before和:after添加動畫，形成對勾：
最後的效果如下：
歡迎大神們留言交流。
相關推薦
'前端設計- JavaScript驗證碼製作及實例分析'
"在網頁設計中，尤其表單填寫提交過程中，為防止機器自動登錄，很多網頁都採用驗證碼技術，允許用戶輸入而儘量避免自動登錄。驗證碼實現的方法有很多，PHP繪圖技術可以在服務端生成驗證碼併發送客戶端，HTML5技術下可以使用canvas與JS腳本實現在客戶端瀏覽器自動生成驗證碼。本...
'盤點動漫中那些讓人無比害怕的母親，最後一位把兒子打扮成女孩'
"母愛可以說是天底下最偉大的愛了，世界上沒有母親會不愛惜自己的兒女。在動漫的世界裡，也有著許許多多的母親，但並不是所有母親都是那麼偉大的，有一些就是例外。那麼今天就來盤點一下動漫中那些讓人無比恐懼的母親，看看哪一位最可怕？瑪莉安娜《反叛的魯魯修》瑪莉安娜是魯魯修以及娜娜莉的...
'鬥破蒼穹第9集海波東用淨蓮妖火的殘圖換取了六品丹藥，值不值？'
"集龍珠，當海賊，不關注我關注誰。鬥破天，鎮斷魂，點贊關注默無聞。鬥破蒼穹動漫第3季第9集已經更新，在本集中，蕭炎勞煩自己的老師藥老為海波東煉製六品丹藥破厄丹，海波東服用之後也是解開了封印，讓他成功的恢復到了鬥皇級別的水平，因此海波東也遵守約定將淨蓮妖火的殘圖交給了蕭炎。那...
'CSS選擇器和優先級總結，告誡自己不能任性使用！important'
"如果在項目裡面使用了通用的reset.css樣式，但是在具體的頁面裡面要對同一個樣式進行覆蓋式修改，不借助與scoped的和inner style，你會怎麼做？會不會像我一樣在剛接觸的時候給要覆蓋的樣式後面加上!important屬性本文將告訴大家關於CSS選擇器和優先級...
'國漫製作不行？國漫劇本垃圾？那你100%沒看過這部國漫'
"現在很多人嘴上說著國漫崛起，然而其實內心依舊還是認為由中國製作的動漫畫面差、打鬥差、劇情也差。及時有一部分國漫依舊在製作和劇情上非常的優秀，但對於如今國漫的大環境而言依舊很難讓人們真正的認同這句“國漫崛起了”。文/夜白白編輯/動漫新番工作組記得有一段時間國漫是以精美的2D...
'所有初學者最應該用的：編程語言核心重點+知識點視頻教程，限免'
"轉發文章+私信小編 “ 資料 ”，即可獲得以上所有學習教程！Python轉發文章+私信小編（資料）即可獲得所有學習教程！Python學習路線一：Python基礎Python PDF必學知識：【Linux基礎】【Python基礎語法】【Python字符串】【文件操作】【異常...
'用鉛筆畫動漫 雖然工具不高級但效果不錯 你一般用什麼畫'
"（此處已添加圈子卡片，請到今日頭條客戶端查看）很多人都會喜歡畫動漫插畫，為此應該準備了不少工具材料吧，什麼針管筆、馬克筆、彩鉛水彩高光筆，相關的工具是不少的。當然好材料也是有好價格的。隨隨便便來一個套裝幾百塊是正常現象，對於學生黨可能會有點吃力。那麼是不是沒有好的工具材料...
推薦中...