文章目录
?实现效果?模块实现解析?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);}