css3之信号强度样式

<style>
    .signal-week {
        position: relative;
        width: 120px;
        height: 10px;
        background-image: linear-gradient(90deg, #F0F9D4, #A2DF6B, #67D972);
        border: 1px solid #E0E0E0;
    }
    .signal-week::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border: 1px solid rgba(255,255,255,0.8);
        background-image: repeating-linear-gradient(90deg, white 0%, transparent 1%, transparent 9%,white 10%);
        border-left-width: 0px;
        bordre-right-width: 0px;
　　　　 animation: signalmove 0.5s cubic-bezier(0.25,0.1,0.25,1) infinite;
    }

　　　　@keyframes signalmove {
　　　　　　0% {
　　　　　　　　background-image: repeating-linear-gradient(45deg, white 0%, transparent 1%, transparent 9%,white 10%);
　　　　　　}
　　　　　　25% {
　　　　　　　　background-image: repeating-linear-gradient(45deg, white 2%, transparent 3%, transparent 11%,white 12%);
　　　　　　}
　　　　　　50% {
　　　　　　　　background-image: repeating-linear-gradient(45deg, white 4%, transparent 5%, transparent 13%,white 14%);
　　　　　　}
　　　　　　75% {
　　　　　　　　background-image: repeating-linear-gradient(45deg, white 6%, transparent 7%, transparent 15%,white 16%);
　　　　　　}
　　　　　　100% {
　　　　　　　　background-image: repeating-linear-gradient(45deg, white 8%, transparent 9%, transparent 17%,white 18%);
　　　　　　}
　　　　}

</style>    

<div class="signal-week"></div>

效果：

调整角度（45deg）的变异