首页>>表单>>Checkbox复选框动画效果(2019-08-04)

Checkbox复选框动画效果

Checkbox复选框动画效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <input class="inp-cbx" id="morning" type="checkbox" style="display: none;">  
  2.   <label class="cbx" for="morning"><span>  
  3.     <svg width="12px" height="10px">  
  4.       <use xlink:href="#check"></use>  
  5.     </svg>  
  6.     </span><span>Morning</span></label>  
  7.   <input class="inp-cbx" id="noon" type="checkbox" style="display: none;">  
  8.   <label class="cbx" for="noon"><span>  
  9.     <svg width="12px" height="10px">  
  10.       <use xlink:href="#check"></use>  
  11.     </svg>  
  12.     </span><span>Noon</span></label>  
  13.   <input class="inp-cbx" id="afternoon" type="checkbox" style="display: none;">  
  14.   <label class="cbx" for="afternoon"><span>  
  15.     <svg width="12px" height="10px">  
  16.       <use xlink:href="#check"></use>  
  17.     </svg>  
  18.     </span><span>Afternoon</span></label>  
  19.   <input class="inp-cbx" id="evening" type="checkbox" style="display: none;">  
  20.   <label class="cbx" for="evening"><span>  
  21.     <svg width="12px" height="10px">  
  22.       <use xlink:href="#check"></use>  
  23.     </svg>  
  24.     </span><span>Evening</span></label>  
  25.   <!--SVG Sprites-->  
  26.   <svg class="inline-svg">  
  27.     <symbol id="check" viewBox="0 0 12 10">  
  28.       <polyline points="1.5 6 4.5 9 10.5 1"></polyline>  
  29.     </symbol>  
  30.   </svg>  

 


原文地址:http://www.freejs.net/article_biaodan_805.html