HTML+CSS+JS 动态马赛克按钮
| 经营范围：电脑组装，电脑维修，智能家居设备，苹果电脑系统安装，苹果手机刷机，监控安装，媒体编辑，数据恢复，复印打印，网站制作等 |
HTML：
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态马赛克按钮</title> <link rel="stylesheet" href="./36-动态马赛克按钮.css"> </head>
<body> <div class="button"> <div class="back" style="--c:#e74c3c;"></div> <p>求点赞</p> </div> <div class="button"> <div class="back" style="--c:#2ecc71;"></div> <p>求关注</p> </div> <div class="button"> <div class="back" style="--c:#3498db;"></div> <p>求收藏</p> </div> <div class="button"> <div class="back" style="--c:#9b59b6;"></div> <p>求转发</p> </div> </body> <script src="./动态马赛克按钮.js"></script>
</html> |
CSS:
|
* { margin: 0; padding: 0; }
body { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #e8e8e8; }
.button { width: 250px; height: 80px; border: 2px solid #fff; display: flex; justify-content: center; align-items: center; border-radius: 10px; margin: 15px 0; cursor: pointer; overflow: hidden; position: relative; }
.button p { font-size: 22px; font-weight: bold; position: absolute; transition: 1s; }
.button .back { width: 100%; height: 100%; position: absolute; }
.button .back span { background-color: #fff; display: block; float: left; }
.button:hover div span { background-color: var(--c); }
.button:hover p { color: white; } |
JS：
|
let backs = document.getElementsByClassName('back'); for (let i = 0; i < backs.length; i++) { let back = backs[i]; let width = back.clientWidth / 25; let height = width; let count = 25 * parseInt(back.clientHeight / height); for (let j = 0; j < count; j++) { let span = document.createElement('span'); span.style.width = width + 'px'; span.style.height = width + 'px'; span.style.transition = '0.2s linear ' + Math.random() / 2 + 's'; back.appendChild(span); } } |
