js 老式圆圈电话拨打按键动画

转载 (原文地址) 1130331201 随笔 JS 285阅读 2018-02-02 11:00:28 举报

<style type="text/less">

.circle-keyboard {
position: relative;
width: 300px;
height: 300px;
margin: 30px auto;
input { display: none }
section {
position: absolute; left: 0; right: 0; top: 0; bottom: 0;
transition: transform 1.5s ease;
b {
position: absolute; left: 50%; top: 0; width: 30px; height: 50%;
margin-left: -15px; text-align: center;
transform-origin: center bottom;
// background: rgba(0,0,0, 0.1);
}
label {
cursor: pointer;
position: absolute;
left: 0;
z-index: 1;
width: 26px;
height: 26px;
line-height: 26px;
border-radius: 50%;
border: 2px solid #d2d2d2;
&:hover {
border-color: #333;
}
}
}
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1));
input:nth-child(@{counter}):checked ~ section {
transform: rotate(@counter -30deg);
}
input:nth-child(@{counter}):checked ~ section > b:nth-child(@{counter}) label {
border: 2px solid red;
transform: scale(1.2);
}
section > b:nth-child(@{counter}){
transform: rotate(@counter
30deg);
}
}
.loop(12)
}

</style>
<div class="circle-keyboard">
<input type="radio" name="circle-key" id="circle-key-0"/>
<input type="radio" name="circle-key" id="circle-key-1"/>
<input type="radio" name="circle-key" id="circle-key-2"/>
<input type="radio" name="circle-key" id="circle-key-3"/>
<input type="radio" name="circle-key" id="circle-key-4"/>
<input type="radio" name="circle-key" id="circle-key-5"/>
<input type="radio" name="circle-key" id="circle-key-6"/>
<input type="radio" name="circle-key" id="circle-key-7"/>
<input type="radio" name="circle-key" id="circle-key-8"/>
<input type="radio" name="circle-key" id="circle-key-9"/>
<input type="radio" name="circle-key" id="circle-key-"/>
<input type="radio" name="circle-key" id="circle-key-#"/>
<section>
<b><label for="circle-key-0">0</label></b>
<b><label for="circle-key-1">1</label></b>
<b><label for="circle-key-2">2</label></b>
<b><label for="circle-key-3">3</label></b>
<b><label for="circle-key-4">4</label></b>
<b><label for="circle-key-5">5</label></b>
<b><label for="circle-key-6">6</label></b>
<b><label for="circle-key-7">7</label></b>
<b><label for="circle-key-8">8</label></b>
<b><label for="circle-key-9">9</label></b>
<b><label for="circle-key-
">*</label></b>
<b><label for="circle-key-#">#</label></b>
</section>
</div>
<script src="https://cdn.bootcss.com/less.js/2.7.2/less.js"></script>;
<script>
</script>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复