一个好玩的h5交互设计（俗称创建剪切蒙版实例）

一、应用场景

根据个人资料的完善程度动画变动进度，其中文字黑白衔接的部分在设计上称为剪切蒙版

二、效果图

三、实现代码

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;
}