[前端面试题_上机] 用CSS写出一个发廊灯效果

364 阅读1分钟

实物图

src=http___www.szthks.com_localimg_687474703a2f2f6777312e616c6963646e2e636f6d2f62616f2f75706c6f616465642f69342f544232367a46426d48426d7075466a535a4675585861475f5858615f2121323234303033393531392e6a7067.jpg&refer=http___www.szthks.webp

效果图

SDGIF_Rusult_1.gif

具体代码落地

<style>
* {
	margin: 0;
	padding: 0;
    }
 
.box {
	width: 100px;
	height: 1000px;
	margin: 80px auto;
        border-radius: 20px;
	transition: all .5s linear;
	animation: animate 0.5s linear infinite;
	background-size: 100px 100px;
	background-image: linear-gradient(  135deg, #fff, #fff 25%, black 25%, black 50%, #fff 50%, #fff 75%, black 75%, black 100%  );
}

@keyframes animate {
     0 {
    }
    100% {
         background-position:100px 0;
    }
}
</style>


<body>
  <div class="box">
  </div>
</body>