一抛虏、應用場景
根據(jù)個人資料的完善程度動畫變動進度阳谍，其中文字黑白銜接的部分在設計上稱為剪切蒙版
二、效果圖
image.png
三郭卫、實現(xiàn)代碼
css代碼
<div class="box">
完善資料詳情
<div id="box-sub" class="box-sub">
<span>完善資料詳情</span>
</div>
</div>
<input onclick="change('25%')" type="button" value="進度25%" name="">
<input onclick="change('52%')" type="button" value="進度50%" name="">
<input onclick="change('75%')" type="button" value="進度75%" name="">
<input onclick="change('100%')" type="button" value="進度100%" name="">
<script type="text/javascript">
function change(value){
document.getElementById('box-sub').style.width = value
}
</script>
html代碼
.box {
position: relative;
width: 300px;
height: 70px;
line-height: 70px;
margin: 100px auto;
background: #F0EFF4;
border-radius: 35px;
color: #0A3F6D;
font-size: 20px;
text-align: center;
}
.box-sub{
overflow: hidden;
position: absolute;
left: 0;
top: -100px;
width: 0;
height: 70px;
background: linear-gradient(to right, #0A3F6D , #FC6F54);
transition: all .5s;
line-height: 70px;
margin: 100px auto;
border-radius: 35px;
color: #0A3F6D;
font-size: 20px;
text-align: center;
}
.box-sub span{
display: inline-block;
width: 300px;
height: 70px;
border-radius: 35px;
color: #ffffff;
font-size: 20px;
text-align: center;
}
