第234练最终效果：
HTML:
<!DOCTYPE html><html lang=”en”><head><meta charset=”UTF-8″ /><meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /><linkrel=”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=”index.css” /><title>第234练</title></head><body><button id=”btn” class=”magic”>点击变</button><div id=”boxes” class=”boxes big”></div><script src=”index.js”></script></body></html>
CSS:
@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;}.magic {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;}.magic:focus {outline: none;}.magic: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(‘234.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()
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
