效果图
页面结构
页面结构我们只有一个大盒子，大盒子里面有一个魔术帽承载盒子以及魔术帽变色按钮，当魔术帽变色按钮点击后魔术帽的颜色会发生改变
<div id="app"> <!-- 魔术帽 --> <div> <div class="hat"></div> <div class="brim"></div> </div> <div> <!-- 魔术帽按钮 --> <button id="btn">魔术帽变色</button> </div> </div>
初始样式
清除所有元素的内边距外边距
* { margin: 0; padding: 0; }
使用定位的方式让大盒子页面居中，然后使用flex布局，先将Y轴设置为主轴，然后再让里面的内容Y轴居中和X轴居中
#app { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; justify-content: center; align-items: center; }
让大盒子里面的元素也使用flex布局X轴居中和Y轴居中
#app>div { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 20px; }
帽子样式
设置好帽子的宽高，用边框圆角属性让帽子变成一个半圆，然后给上背景色，再让设置下边框属性，用此充当帽子连接处
.hat { height: 150px; width: 300px; border-radius: 150px 150px 0 0; background: #08ef5d; border-bottom: 20px solid #0bec2d; }
帽檐样式
我们设置好帽檐的宽高，然后通过边框圆角属性给出效果，设置好背景色，我们由于使用flex布局Y轴为主轴，X轴居中，所以我们这里不需要给其他设置，就可实现一个帽子的效果
.brim { height: 50px; width: 400px; border-radius: 400px 400px 0 0; background: #37ff00; }
帽子变色逻辑
// 获取魔术帽变色按钮 const btn = document.getElementById('btn'); // 获取帽子元素 const hat = document.getElementsByClassName('hat')[0]; // 获取帽檐元素 const brim = document.getElementsByClassName('brim')[0]; // 当魔术帽变色按钮点击时 btn.onclick = () => { // 随机获取3个0~255之间的数用于更换背景色 const R = Math.round(Math.random() * 255); const G = Math.round(Math.random() * 255); const B = Math.round(Math.random() * 255); // 给魔术帽重新赋值颜色 hat.style.backgroundColor = `rgb(${R},${G},${B})`; // 给魔术帽连接处重新赋值颜色 hat.style.borderBottomColor = `rgb(${G},${B},${R})`; // 给魔术帽帽檐重新赋值颜色 brim.style.backgroundColor = `rgb(${B},${G},${R})`; }
代码放到码上掘金了，感兴趣的大家可以看一看！
坚持努力，无惧未来！
