文章目录
📚实现效果
📚模块实现解析
🐇html
- 搭个框架
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>喵喵大王立大功</title><linkrel="stylesheet"href="./style.css"></head><body><mainid="board"><!-- 赛博小猫 --><divclass="maomao"><imgid="muyu"src="./src/xixi.png"alt="木鱼图片"onclick="addMerit()"><divid="merit"><pclass="big">功德+1</p><pclass="medium">好运+1</p><pclass="small">烦恼-1</p></div></div></main></body><scriptsrc="./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显示不显示，以实现木鱼敲击效果。functionaddMerit(){ document.getElementById('merit').style.display ="block";setTimeout(function(){ document.getElementById('merit').style.display ="none";},500);}
标签：
javascript
本文转载自: https://blog.csdn.net/m0_63398413/article/details/138500502
版权归原作者 啦啦右一 所有， 如有侵权，请联系我们删除。
版权归原作者 啦啦右一 所有， 如有侵权，请联系我们删除。