📢前言
代码取自开源项目50projects50days,用作个人学习和巩固三件套的知识,增加了注释,可能会有小改动。
在线演示地址
📝实现思路及效果


💻代码
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3d盒子背景</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous">
<link rel="stylesheet" href="style.css"> </head> <body> <button id="btn" class="change"> change style </button> <div id="boxes" class="boxes big"></div> <script src="script.js"></script> </body> </html>
|
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101
| @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); * { box-sizing: border-box; }
body { background-color: #fafafa; font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; }
.change { background-color: #f9ca24; color: #fff; font-family: 'Poppins', sans-serif; border: 0; border-radius: 3px; font-size: 16px; padding: 12px 20px; cursor: pointer; position: fixed; top: 20px; letter-spacing: 2px; box-shadow: 0 3px rgba(249, 202, 36, 0.5); z-index: 100; }
.change:focus { outline: none; }
.change:active { box-shadow: none; transform: translateY(2px); }
.boxes { display: flex; flex-wrap: wrap; justify-content: space-between; height: 500px; width: 850px; position: relative; top: 28px; transition: 0.4s ease; }
.boxes.big { width: 950px; height: 600px; }
.box { background-image: url('https://vip1.loli.io/2022/05/05/yaiAdPZeuYRXcL5.jpg'); background-repeat: no-repeat; background-size: 850px 500px; position: relative; height: 125px; width: 170px; transition: 0.4s ease; }
.box::after { content: ''; background-color: #eae5e6; position: absolute; top: 8px; right: -15px; height: 100%; width: 15px; transform: skewY(45deg); }
.box::before { content: ''; background-color: #eae5e6; position: absolute; bottom: -15px; left: 8px; width: 100%; height: 15px; transform: skewX(45deg); }
|
script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| const boxesContainer = document.getElementById('boxes') const btn = document.getElementById('btn')
btn.addEventListener('click', () => boxesContainer.classList.toggle('big'))
function createBoxes() { for (let i = 0; i < 4; i++) { for (let j = 0; j < 5; j++) { const box = document.createElement('div') box.classList.add('box') box.style.backgroundPosition = `${-j * 170}px ${-i * 125}px` boxesContainer.appendChild(box) } } }
createBoxes()
|