前端 | 自定义电子木鱼

文章目录

📚实现效果
📚模块实现解析
- 🐇html
- 🐇css
- 🐇javascript

📚实现效果

在这里插入图片描述

📚模块实现解析

🐇html

搭个框架

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>喵喵大王立大功</title><link rel="stylesheet" href="./style.css">
</head>
<body><main id="board"><!-- 赛博小猫 --><div class="maomao"><img id="muyu" src="./src/xixi.png" alt="木鱼图片" onclick="addMerit()"><div id="merit"><p class="big">功德+1</p><p class="medium">好运+1</p><p class="small">烦恼-1</p></div></div></main>
</body>
<script src="./js/maomao.js"></script>
</html>

🐇css

主要是设置了绝对定位，让它不管在哪个视口（电脑还是平板都在相对固定的位置正常显示）。

然后还有一些字体显示效果（添加了一个渐隐动画）。

* {padding: 0;margin: 0;
}/* 整个面板 */
#board {position: relative;/* 铺满整个视口 */width: 100vw;height: 100vh;background-color: #F1EEE7;overflow: hidden;font-family: FangSong;
}/* #region小猫start */
/* 赛博小猫 */
.maomao {width: 250px;height: 350px;text-align: center;position: absolute;bottom: -5vh;right: 13vw;display: inline-block; /* 50% 缩放，根据显示效果的凭感觉调整 */transform: scale(0.5); 
}
#merit {/* 让它绝对定位，在不同视口下都相对正常地显示 */position: absolute;width: 250px;height: 350px;bottom: -2%;right: -70%;display: none;text-align: center;/* 添加渐变消失动画 */animation: fadeOut 1.5s forwards; 
}
#merit p {margin: 15px; font-weight: bold;/* 颜色渐变效果 */transition: color 1s ease; 
}
#merit .big {font-size: 38px; color: #694b3c;
}
#merit .medium {font-size: 33px; color: #906c4a;
}
#merit .small {font-size: 28px; color: #99806c;
}@keyframes fadeOut {to {opacity: 0;}
}
/* #endregion小猫start */

🐇javascript

非常简单的一集，就是一个点击效果。通过控制merit显示不显示，以实现木鱼敲击效果。

function addMerit() {document.getElementById('merit').style.display = "block";setTimeout(function(){document.getElementById('merit').style.display = "none";}, 500);
}