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

一、应用场景

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

二、效果图

image.png

三、实现代码

css代码

    

        完善资料详情
        

            完善资料详情
        
    
    
    
    
    
    

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