css+js实现可爱小猫咪化妆装扮效果代码
代码语言:html
所属分类:其他
代码描述:css+js实现可爱小猫咪化妆装扮效果代码,点击右侧眼镜、帽子、领结给小猫咪装扮。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: Arial, Helvetica, sans-serif; } .container { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; gap: 2rem; } .wrapper { height: 300px; width: 300px; position: relative; background-color: #7070f3; border-radius: 50%; overflow: hidden; } .controls { display: flex; flex-direction: column; gap: 2rem; } .controls input { display: none; } .body { height: 80px; width: 40%; position: absolute; bottom: -2%; right: 50%; transform: translateX(50%); background-color: #f4f4f4; clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%); } .head { height: 130px; width: 58%; border-radius: 50%; position: absolute; z-index: 5; bottom: 60px; right: 50%; transform: translateX(50%); background-color: #f4f4f4; overflow: hidden; } .head::before { content: ""; aspect-ratio: 1/1; width: 60%; position: absolute; left: -25%; top: -20%; border-radius: 50%; background-color: #f7bcd1; } .head::after { content: ""; aspect-ratio: 1/1; width: 60%; position: absolute; right: -25%; top: -20%; border-radius: 50%; background-color: #f7bcd1; } .ears { display: flex; gap: 3rem; position: absolute; bottom: 140px; right: 50%; transform: translateX(50%); } .ear { height: 70px; width: 70px; background-color: #f4f4f4; border-radius: 10% 40% 0 40%; transform: rotateY(180deg) rotate(70deg); transform-origin: center; transform-box: fill-box; display: grid; place-items: center; } .ear:nth-child(2) { transform: rotate(70deg); } .ear::before { content: ""; height: 50%; width: 50%; background-color: #f68eb3; border-radius: 10% 40% 0 40%; } .eyes { display: flex; gap: 3rem; position: absolute; bottom: 60px; right: 50%; z-index: 3; transform: translateX(50%); } .eye { height: 30px; width: 30px; border-radius: 50%; background-color: #010101; position: relative; } .eye::before { content: ""; height: 40%; width: 40%; position: absolute; top: 7%; right: 9%; border-radius: 50%; background-color: #ffffff69; } .nose { position: absolute; bottom: 50px; right: 50%; transform: translateX(50%); } .shape { height: 22px; width: 22px; transform: rotate(45deg); transform-origin: center; transform-box: fill-box; background-color: #000000; border-radius: 100% 10px 10px 10px; position: relative; } .nose::before { content: ""; height: 10px; width: 5px; position: absolute; bottom: -10px; right: 50%; transform: translateX(50%); background-color: #000; } .mouth { font-size: 2.2rem; font-weight: bold; position: absolute; bottom: 15px; right: 50%; transform: translateX(50%); } .mustaches { display: flex; gap: 1rem; position: absolute; bottom: 27px; right: 50%; transform: translateX(50%); z-index: 2; } .mus { display: flex; flex-direction: column; } .mustach { height: 20px; width: 5rem; border-radius: 50%; border-top: 2px solid #000000; margin-top: -15px; } .pads { display: flex; gap: 2.5rem; position: absolute; bottom: -5px; right: 50%; z-index: 5; transform: translateX(50%); } .pad { height: 40px; width: 50px; border-radius: 50%; background-color: #d1d1d1; } .hat { height: 100px; width: 90px; background-color: #000; position: absolute; bottom: 400px; right: 50%; z-index: 5; transform: translateX(50%); display: flex; align-items: end; justify-content: center; border-radius: 10px; transition: bottom 0.3s ease-in-out; } .hat .bottom { height: 30px; width: 120px; background-color: #000; position: absolute; border-radius: 9999px; } .glasses { display: flex; gap: 2rem; position: absolute; bottom: 110px; right: -50%; z-index: 5; transform: translateX(50%); transition: right 0.3s ease-in-out; } .glasses::before { content: ""; height: 5px; width: 2rem; background-color: #fff; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); } .glass { height: 50px; width: 50px; border-radius: 50%; border: 4px solid #000; background-color: rgba(255, 255, 255, 0.349); } .tie { height: 50px; width: 30px; background-color: #000; position: absolute; bottom: -80px; right: 50%; z-index: 7; transform: translateX(50%); clip-path: polygon(0% 0%, 100% 0%, 70% 20%, 100% 100%, 0% 100%, 30% 20%); transition: bottom 0.3s ease-in-out; } .glassescontrol, .hatcontrol, .tiecontrol { height: 50px; width: 50px; background-color: #f290b2; position: relative; display: grid; place-items: cent.........完整代码请登录后点击上方下载按钮下载查看
网友评论0