8款SVG創建的動畫checkbox多選框和radio單選框
作者:admin 時間:2022-12-10 11:4:42 瀏覽:對于checkbox多選框和radio單選框，你是不是有點審美疲勞了，因為樣式千篇一律，今天給大家來點創新的，用SVG來設計出可動畫交互的checkbox多選框和radio單選框，并且有8款那么多。
話不多說，我們先看第一款，用SVG創建的動畫checkbox多選框。
1、打叉checkbox
實現代碼
HTML
<form class="ac-custom ac-checkbox ac-cross" autocomplete="off">
<h2>您如何通過即插即用網絡協同管理授權市場？</h2>
<ul>
<li><input id="cb1" name="cb1" type="checkbox"><label for="cb1">有效釋放信息</label></li>
<li><input id="cb2" name="cb2" type="checkbox"><label for="cb2">快速最大化及時交付成果</label></li>
<li><input id="cb3" name="cb3" type="checkbox"><label for="cb3">顯著維護解決方案</label></li>
<li><input id="cb4" name="cb4" type="checkbox"><label for="cb4">完全協同關系</label></li>
<li><input id="cb5" name="cb5" type="checkbox"><label for="cb5">專業培養客戶服務</label></li>
</ul>
</form>
form元素使用了三個樣式類：ac-custom、ac-checkbox、ac-cross，li列表樣式類是checkbox。
CSS
/* 組件樣式 */
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ac-custom {
padding: 0 3em;
max-width: 900px;
margin: 0 auto;
}
.ac-custom h2 {
font-size: 3em;
font-weight: 300;
padding: 0 0 0.5em;
margin: 0 0 30px;
}
.ac-custom ul,
.ac-custom ol {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 800px;
}
.ac-custom li {
margin: 0 auto;
padding: 2em 0;
position: relative;
}
.ac-custom label {
display: inline-block;
position: relative;
font-size: 2em;
padding: 0 0 0 80px;
vertical-align: top;
color: rgba(0,0,0,0.5);
cursor: pointer;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
width: 50px;
height: 50px;
top: 50%;
left: 0;
margin-top: -25px;
position: absolute;
cursor: pointer;
}
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
opacity: 0;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
z-index: 100;
}
.ac-custom label::before {
content: '';
border: 4px solid #fff;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.ac-radio label::before {
border-radius: 50%;
}
.ac-custom input[type="checkbox"]:checked + label,
.ac-custom input[type="radio"]:checked + label {
color: #fff;
}
.ac-custom input[type="checkbox"]:checked + label::before,
.ac-custom input[type="radio"]:checked + label::before {
opacity: 0.8;
}
/* SVG 樣式 */
.ac-custom svg {
position: absolute;
width: 40px;
height: 40px;
top: 50%;
margin-top: -20px;
left: 5px;
pointer-events: none;
}
.ac-custom svg path {
stroke: #fdfcd3;
stroke-width: 13px;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
解釋
我們可以通過CSS修改checkbox或radio的大小。
.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
width: 50px; /* 修改checkbox或radio的大小(寬) */
height: 50px; /* 修改checkbox或radio的大小(高) */
top: 50%; /* 調整checkbox或radio的位置 */
left: 0; /* 調整checkbox或radio的位置 */
margin-top: -25px;
position: absolute;
cursor: pointer;
}
可以通過CSS修改SVG動畫大小、位置。
.ac-custom svg {
position: absolute;
width: 40px; /* 修改SVG動畫的大小(寬) */
height: 40px; /* 修改SVG動畫的大小(高) */
top: 50%; /* 修改SVG動畫的位置 */
margin-top: -20px;
left: 5px;
pointer-events: none;
}
通過CSS修改SVG顏色和寬度
.ac-custom svg path {
stroke: #fdfcd3; /* 修改SVG動畫顏色 */
stroke-width: 13px; /* 修改SVG線條寬度 */
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
Javascript
該SVG動畫設計用到了jQuery，所以需要引用jQuery庫文件。
<script src='jquery-3.2.1.min.js'></script>
實現代碼
<script src='jquery-3.2.1.min.js'></script>
<script>
if (document.createElement('svg').getAttributeNS)
{
var checkbxsCross = Array.prototype.slice.call(document.querySelectorAll('form.ac-cross input[type="checkbox"]')),
pathDefs = {
cross: ['M 10 10 L 90 90', 'M 90 10 L 10 90']
},
animDefs = {
cross:
{
speed: .2,
easing: 'ease-in-out'
}
};
function createSVGEl(def)
{
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
if (def)
{
svg.setAttributeNS(null, 'viewBox', def.viewBox);
svg.setAttributeNS(null, 'preserveAspectRatio', def.preserveAspectRatio);
}
else
{
svg.setAttributeNS(null, 'viewBox', '0 0 100 100');
}
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
return svg;
}
function controlCheckbox(el, type, svgDef)
{
var svg = createSVGEl(svgDef);
el.parentNode.appendChild(svg);
el.addEventListener('change', function()
{
if (el.checked)
{
draw(el, type);
}
else
{
reset(el);
}
});
}
checkbxsCross.forEach(function(el, i)
{
controlCheckbox(el, 'cross');
});
function draw(el, type)
{
var paths = [],
pathDef,
animDef,
svg = el.parentNode.querySelector('svg');
switch (type)
{
case 'cross':
pathDef = pathDefs.cross;
animDef = animDefs.cross;
break;
};
paths.push(document.createElementNS('http://www.w3.org/2000/svg', 'path'));
if (type === 'cross')
{
paths.push(document.createElementNS('http://www.w3.org/2000/svg', 'path'));
}
for (var i = 0, len = paths.length; i < len; ++i)
{
var path = paths[i];
svg.appendChild(path);
path.setAttributeNS(null, 'd', pathDef[i]);
var length = path.getTotalLength();
// 清除前面的任何轉換
// path.style.transition = path.style.WebkitTransition = path.style.MozTransition = 'none';
// 設置開始位置
path.style.strokeDasharray = length + ' ' + length;
if (i === 0)
{
path.style.strokeDashoffset = Math.floor(length) - 1;
}
else path.style.strokeDashoffset = length;
// 觸發布局，以便在瀏覽器中計算樣式
// 設置動畫前拾取起始位置
path.getBoundingClientRect();
// 定義我們的過渡
path.style.transition = path.style.WebkitTransition = path.style.MozTransition = 'stroke-dashoffset ' + animDef.speed + 's ' + animDef.easing + ' ' + i * animDef.speed + 's';
// 開始
path.style.strokeDashoffset = '0';
}
}
function reset(el)
{
Array.prototype.slice.call(el.parentNode.querySelectorAll('svg > path')).forEach(function(el)
{
el.parentNode.removeChild(el);
});
}
}
</script>
用類似的方法和代碼，可以設計出很多不同的SVG動畫checkbox多選框和radio單選框按鈕。
2、填充radio
3、打勾checkbox
4、畫圓radio
5、填充checkbox
6、旋渦radio
7、對角線checkbox
8、劃線列舉
總結
本文介紹了8款SVG創建的動畫checkbox多選框和radio單選框，讓你的網頁設計更具個性。
相關文章
相關文章
x
- 站長推薦
