【博主推荐】html好看的拼图验证码(附源码)

html好看的拼图验证码

你好！ 拼图验证码，用于登录或者需要验证的地方。支持多图片刷新使用，布局可变，代码简洁，注释清晰，可以直接使用。

1.拼图验证码效果

拼图验证界面

成功后跳转的界面

2.背景图配置

1.可以配置本地图片路径，也可以配置服务器图片路径；
2.可以配置随机图片，多篇多少随意配置。

var imgList = [ // 图片组
    "./img/p1.jpg",
    "./img/p2.jpg",
    "./img/p3.jpg",
    "./img/p4.jpg",
];

3.边框背景色可以自定义配置

.verify-slide-con{ /* 滑动拼图容器块 */
     width: 360px;
     padding: 10px 20px;
     border: 1px solid orange;
 }
 .img-con{ /* 图片容器块 */
     width: 100%;
     height: 200px;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     border: 1px solid orange;
     position: relative;
 }

5.界面代码

6.源码下载

【博主推荐】html好看的拼图验证码(源码) 点击下载