代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> *{ margin:0; padding:0; } .wrap{ height: 471px; width: 1330px; margin:100px auto; } body{ background:#000; } .img{ list-style:none; display:flex;/*弹性盒子*/ flex-wrap:wrap;/*换行显示*/ justify-content:space-around;/*从左到右平分*/ align-items:center;/*从上到下平分*/ width:100%; height: 100%; } .img li{ width: 418px; height: 213px; background:url('index.jpg') no-repeat 0 13px/418px 213px; transition: 0.7s; position:relative; } .img li:nth-of-type(2){ background-image:url('index.jpg'); } .img li:hover{ background-position:0px; } svg{ height: 213px; width: 428px; position:absolute; } polyline{ stroke:#a57c47; fill:none;/*无填充 只显示边框*/ stroke-width:2px;/*粗细*/ stroke-dasharray:1180;/*线段长度*/ stroke-dashoffset:1180;/*线段未绘制长度*/ transition:1s; } .img li:hover polyline{ stroke-dashoffset:0; } </style> </head> <body> <div class="wrap"> <ul class="img"> <li> <svg> <polyline points='9,9 409,9 409,199 9,199 9,9'/> </svg> </li> <li> <svg> <polyline points='9,9 409,9 409,199 9,199 9,9'/> </svg> </li> <li> <svg> <polyline points='9,9 409,9 409,199 9,199 9,9'/> </svg> </li> <li> <svg> <polyline points='9,9 409,9 409,199 9,199 9,9'/> </svg> </li> <li> <svg> <polyline points='9,9 409,9 409,199 9,199 9,9'/> </svg> </li> <li> <svg> <polyline points='9,9 409,9 409,199 9,199 9,9'/> </svg> </li> </ul> </div> </body> </html>
