一款纯CSS3漂亮的checkbox和radio美化效果,有30多种丰富的样式可供选择,有带图标的、带点击动画的、点击文字变化的等等,整体样式效果都非常的酷炫。
页面的head部分,需引入图标字体库和多个样式文件,代码如下:
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link async rel="stylesheet" href="https://cdn.materialdesignicons.com/1.8.36/css/materialdesignicons.min.css"/>
<link async rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css"/>
<link async rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.7/typicons.min.css"/>
<link async rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="src/pretty.min.css">
页面的body部分,重复使用了多个div、input、label等标签,部分代码如:
<h3>BOOTSTRAP GLYPHICONS</h3>
<div class="pretty success smooth">
<input type="checkbox">
<label><i class="glyphicon glyphicon-ok"></i> glyphicon-ok</label>
</div>
<div class="pretty circle plain o-danger smooth">
<input type="checkbox">
<label><i class="glyphicon glyphicon-remove"></i> glyphicon-remove</label>
</div>
<div class="pretty plain smooth toggle">
<input type="checkbox">
<label><i class="glyphicon glyphicon-heart-empty"></i> glyphicon-heart-empty</label>
<label><i class="glyphicon glyphicon-heart info"></i> glyphicon-heart</label>
</div>
<h3>MATERIAL DESIGN ICONS (MDI)</h3>
<div class="pretty success smooth">
<input type="checkbox">
<label><i class="mdi mdi-check"></i> mdi-check</label>
</div>
<div class="pretty circle plain o-danger smooth">
<input type="checkbox">
<label><i class="mdi mdi-close"></i> mdi-close</label>
</div>
<div class="pretty plain smooth toggle">
<input type="checkbox">
<label><i class="mdi mdi-heart-outline"></i> mdi-heart-outline</label>
<label><i class="mdi mdi-heart info"></i> mdi-heart</label>
</div>
<h3>MATERIAL DESIGN ICONS (ZMDI)</h3>
<div class="pretty success smooth">
<input type="checkbox">
<label><i class="zmdi zmdi-check"></i> zmdi-check</label>
</div>
<div class="pretty circle plain o-danger smooth">
<input type="checkbox">
<label><i class="zmdi zmdi-close"></i> zmdi-close</label>
</div>
<div class="pretty plain smooth toggle">
<input type="checkbox">
<label><i class="zmdi zmdi-favorite-outline"></i> zmdi-favorite-outline</label>
<label><i class="zmdi zmdi-favorite info"></i> zmdi-favorite</label>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791