今天是我們【每日一練】的第66期，在這一期中，我們一起來練習一個3D背景邊框的效果，最終效果如下：
關于昨天和今天的練習中，使用到的gif動圖，都是來源于Giphy這個動圖網站，位址為：https://giphy.com/
這個網站上有很多好玩有趣的動圖，有興趣的小夥伴可以自行去下載下傳或者擷取想要的動圖資源。
現在，我們一起來看看今天這個練習的代碼部分。
HTML代碼：
<!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> CSS代碼：
* {
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() 寫在最後
以上就是今天【每日一練】的全部内容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點贊我，并将它分享給你身邊的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。