css效果之错位光波

前言

初来乍到，请多关照，废话不多说，直接上代码

css

               * {
                    padding: 0;
                    margin: 0;
		}
		#tube-con {
		    width: 157px;
		    height: 55px;
		    position: absolute;
		    /*right: -5px;*/
		    top: 15px;
		}
		#mask {
		    width: 0px;
		    height: 100%;
		    overflow: hidden;
		    position: absolute;
		    top: 0;
		    left: 0;
		    transition: all 0.5s;
		}
		#mask svg {
		    width: 157px;
		    height: 55px;
		}
		#tube-con:hover #mask {
			width: 157px;
		}
		#tube-con:hover #orange-mask {
		    animation: move1 0.5s linear 0.2s infinite;
		}
		#orange-mask {
		    width: 18px;
		    height: 100%;
		    overflow: hidden;
		    position: absolute;
		    left: -15px;
		    top: 0px;
		}
		#tube-con:hover #orange-mask svg {
		    animation: movetwo 0.5s linear 0.2s infinite;
		}
		#orange-mask svg {
		    position: absolute;
		    top: 0;
		    left: 15px;
		    width: 157px;
		    height: 55px;
		}
		 @keyframes move1 {
			0%{
			left:-15px;
			}
			100%{
			left:140px;
			}
		 }
		 @keyframes movetwo {
			0%{
			left:15px;
			}
			100%{
			left:-140px;
			}
		 }

html

    <div id="tube-con">
            <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 77H234.226L307.006 24H790" stroke="#e5e9ef" stroke-width="20"></path>
                <path d="M0 140H233.035L329.72 71H1028" stroke="#e5e9ef" stroke-width="20"></path>
                <path d="M1 255H234.226L307.006 307H790" stroke="#e5e9ef" stroke-width="20"></path>
                <path d="M0 305H233.035L329.72 375H1028" stroke="#e5e9ef" stroke-width="20"></path>
                <rect y="186" width="236" height="24" fill="#e5e9ef"></rect>
                <ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse>
                <circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle>
                <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#e5e9ef"></ellipse>
                <circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
            </svg>
        <div id="mask">
            <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M1 77H234.226L307.006 24H790" stroke="#f25d8e" stroke-width="20"></path> 
		<path d="M0 140H233.035L329.72 71H1028" stroke="#f25d8e" stroke-width="20"></path> 
		<path d="M1 255H234.226L307.006 307H790" stroke="#f25d8e" stroke-width="20"></path> 
		<path d="M0 305H233.035L329.72 375H1028" stroke="#f25d8e" stroke-width="20"></path> 
                <rect y="186" width="236" height="24" fill="#f25d8e"></rect> 
		<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse> 
		<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle> 
		<ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#f25d8e"></ellipse> 
		<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
            </svg>
	</div>
	<div id="orange-mask">
            <svg viewBox="0 0 1028 385" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M1 77H234.226L307.006 24H790" stroke="#ffd52b" stroke-width="20"></path> 
		<path d="M0 140H233.035L329.72 71H1028" stroke="#ffd52b" stroke-width="20"></path> 
		<path d="M1 255H234.226L307.006 307H790" stroke="#ffd52b" stroke-width="20"></path> 
		<path d="M0 305H233.035L329.72 375H1028" stroke="#ffd52b" stroke-width="20"></path> 
		<rect y="186" width="236" height="24" fill="#ffd52b"></rect> 
		<ellipse cx="790" cy="25.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse> 
		<circle r="14" transform="matrix(1 0 0 -1 790 25)" fill="white"></circle> 
                <ellipse cx="790" cy="307.5" rx="25" ry="25.5" fill="#ffd52b"></ellipse> 
		<circle r="14" transform="matrix(1 0 0 -1 790 308)" fill="white"></circle>
            </svg>
	</div>
    </div>

效果

结束语

一个前端小扒菜，技艺不精，请多指教