css+js效果整理

css玻璃效果

https://www.jq22.com/code4277

 <div class="wrapper">
   <div class="box"></div>
 </div>
<style>
.wrapper {
  display: inline-block;
  background: rgb(77, 171, 226);
  padding: 30px;
}
.wrapper .box {
  width: 280px;
  height: 400px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
}
</style>

css动画显隐替代定时器显隐

    .page-box {
      /* position: relative; */
      height: 200px;
      padding: 50px;
      padding-bottom: 0;
      overflow: hidden;
    }

    .page-box .sub-box {
      height: 200px;
      width: 100%;
      background-color: green;
      /* position: absolute;
      left: 50px;
      top: 80px; */


      animation-name: fadeOut;
      /* 指定动画名称 */
      animation-duration: 6s;
      /* 指定动画持续时间 */
      /* 初始化为可见状态 */
      animation-iteration-count: infinite;
      /* 动画执行次数，默认为1，设置为infinite表示无限次 */
    }

    .page-box .sub-box.bbb {
      animation-delay: 3s;
      background: red;
    }
    .page-box:hover .sub-box{
      animation-play-state:paused;
    }
    @keyframes fadeOut {
      0% {
        opacity: 1;
        display: block;
      }
      48% {
        opacity: 1;
        display: block;
      }
      /* 起始状态，完全不透明 */
      52% {
        opacity: 0;
        display: none;
      }
      /* 起始状态，完全不透明 */
      100% {
        opacity: 0;
        display: none;
      }

      /* 结束状态，完全透明并且隐藏 */
    }

  <div class="page-box">
    <!-- <button οnclick="fnClick('aaa')">aaa</button>
    <button οnclick="fnClick('bbb')">bbb</button> -->
    <div class="aaa sub-box" id="aaa">
      aaaa
    </div>
    <div class="bbb sub-box" id="bbb">
      bbbb
    </div>
    <!-- <div class="ccc sub-box">
      cccc
    </div> -->
  </div>