前端 | 自定义电子木鱼

文章目录

• 实现效果
• 模块实现解析
• • html
  • css
  • javascript

    实现效果

    模块实现解析

    html

    • 搭个框架

                  喵喵大王立大功                                                
      功德+1
                    
      好运+1
                    
      烦恼-1
                            

      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);}