CSS 手写按钮
- HTML部分
<template>
<div id="index" @click="checked">
<div class="btn btnOff" v-if='isChecked'>
<div class="raio"></div>
<div class="txt">off</div>
</div>
<div class='btn btnOn' v-else>
<div class="txt onTxt">on</div>
<div class="raio onColor"></div>
</div>
</div>
</template>
2.js部分
export default {
data() {
return {
isChecked: true
}
},
methods: {
checked() {
if(this.isChecked) {
this.isChecked = false
}else {
this.isChecked = true
}
}
}
}
- CSS部分
<style scoped>
#index {
height: 100px;
}
#index .btn {
background: #ffffff;
width: 360px;
height: 180px;
border: 1px solid #c6ccd2;
border-radius: 50px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
#index .btnOff {
padding: 0 70px 0 20px;
transition: padding 2s;
}
#index .btnOn {
padding: 0 20px 0 70px;
transition: padding 2s;
}
#index .btn .raio {/* off 圆 */
width: 130px;
height: 130px;
border-radius: 130px;
background: #c6ccd2;
}
#index .btn .onColor {/* on 圆 */
background: #24aa98;
}
#index .btn .txt {/* off */
font-size: 80px;
color: #c6ccd2;
}
#index .btn .onTxt {/* on */
color: #24aa98
}
</style>
效果展示