其他
【每日一练】66—实现一个3D边框背景效果
今天是我们【每日一练】的第66期，在这一期中，我们一起来练习一个3D背景边框的效果，最终效果如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>【每日一练】66—实现一个3D边框背景效果</title> </head> <body> <button id="btn" class="button">点击变换</button> <div id="boxes" class="boxes big"></div> </body></html>
* { 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;}
.button { 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: 1px; box-shadow: 0 3px rgba(249, 202, 36, 0.5); z-index: 100;}
.button:focus { outline: none;}
.button:active { box-shadow: none; transform: translateY(2px);}
.boxes { display: flex; flex-wrap: wrap; justify-content: space-around; height: 500px; width: 500px; position: relative; transition: 0.4s ease;}
.boxes.big { width: 600px; height: 600px;}
.boxes.big .box { transform: rotateZ(360deg);}
.box { background-image: url('https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif'); background-repeat: no-repeat; background-size: 500px 500px; position: relative; height: 125px; width: 125px; transition: 0.4s ease;}
.box::after { content: ''; background-color: #f6e58d; position: absolute; top: 8px; right: -15px; height: 100%; width: 15px; transform: skewY(45deg);}
.box::before { content: ''; background-color: #f9ca24; position: absolute; bottom: -15px; left: 8px; height: 15px; width: 100%; transform: skewX(45deg);}
JS代码：
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 < 4; j++) { const box = document.createElement('div') box.classList.add('box') box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px` boxesContainer.appendChild(box) } }}
createBoxes()
写在最后
以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号