源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

标题: 微信朋友圈评论（css+js）或者div的从上往下动画和从下往上动画 [打印本页]
作者: 洪七公    时间: 2023-6-1 21:18
标题: 微信朋友圈评论（css+js）或者div的从上往下动画和从下往上动画

直接上代码：

  1. <!DOCTYPE html>
  2. <html lang="en" id="html">

  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <script src="/js/jquery-3.2.1.min.js"></script>
  10. </head>

  12. <body>
  13.     <div class="review">
  14.         <div class="reviewName">
  15.             <span>用户名字NAME</span>: 园区信息占位符信息占位符信息占信息占位符信息占位符信息
  16.         </div>
  17.     </div>

  19.     <!--删除弹窗 -->
  20.     <div class="deletePopup" id="maskID" style="display: none;">
  21.         <div class="bottomTwo animetion" id="popDivID">
  22.             <div class="delect">删除</div>
  23.             <div class="callLine"></div>
  24.             <div class="cancel" id="cancelID">取消</div>
  25.         </div>
  26.     </div>


  29.     <style>
  30.         .deletePopup {
  31.             position: fixed;
  32.             bottom: 0;
  33.             left: 0;
  34.             width: 100%;
  35.             height: 100vh;
  36.             z-index: 99999999888;
  37.             background-color: rgba(0, 0, 0, .5);
  38.         }

  40.         .bottomTwo {
  41.             background-color: #FFFFFF;
  42.             position: absolute;
  43.             bottom: 0;
  44.             width: 100%;
  45.             height: 1rem;
  46.             border-radius: 0.15rem .15rem 0 0;

  48.         }

  50.         .animetion {
  51.             animation: animate .5s;
  52.             overflow: hidden;
  53.         }

  55.         .delect {
  56.             width: 100%;
  57.             padding: .1rem;
  58.             text-align: center;
  59.             color: red;
  60.             font-size: .16rem;
  61.         }

  63.         .callLine {
  64.             width: 100%;
  65.             height: .08rem;
  66.             background-color: #F5F6F7;
  67.         }

  69.         .cancel {
  70.             width: 100%;
  71.             padding: .1rem;
  72.             text-align: center;
  73.             color: #000;
  74.             font-size: .16rem;
  75.         }



  79.         @keyframes animate {
  80.             from {
  81.                 height: 0px;
  82.                 top: 100vh;
  83.             }

  85.             to {
  86.                 height: 100vh;
  87.                 top: 85vh;

  89.             }
  90.         }

  92.         .reviewName {
  93.             padding: 0.08rem;
  94.             font-size: 0.1rem;
  95.             font-family: Source Han Sans CN;
  96.             font-weight: 400;
  97.             color: #282828;
  98.         }

  100.         .reviewName span {
  101.             color: #CB6461;
  102.         }
  103.     </style>

  105.     <script>
  106.         //打开窗口
  107.         $(".reviewName").click(function (e) {
  108.             $("#maskID").show();
  109.             $(".bottomTwo").show();

  111.         });
  112.         //关闭窗口
  113.         $('#cancelID').on('click', function (e) {
  114.             $(".bottomTwo").slideUp("slow", function () {
  115.                 $(".deletePopup").hide();
  116.             });
  117.         })


  120.         //h5适配
  121.         function recalc() {
  122.             var h = document.getElementById('html');
  123.             var w = document.documentElement.clientWidth;
  124.             // d代表设计宽度
  125.             var d = 375;
  126.             if (w >= 769) {
  127.                 h.style.fontSize = '240px';
  128.             } else {
  129.                 h.style.fontSize = w / d * 100 + 'px';
  130.             }
  131.         }
  132.         window.addEventListener("resize", recalc, false);
  133.         document.addEventListener('DOMContentLoaded', recalc, false);
  134.     </script>

  136. </body>

  138. </html>
复制代码

看下效果：







欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3