css3之信号强度样式

<style>

.signal-week {
　　position: relative;
　　width: 120px;
　　height: 10px;
　　background-image: linear-gradient(90deg, #AADF6B, #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(45deg,white 0%,transparent 1%,transparent 9%,white 10%);
　　border-left-width: 0px;
　　border-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）的变异