源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

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

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 1635|回复: 0

[CSS/Html] 微信朋友圈评论(css+js)或者div的从上往下动画和从下往上动画

[复制链接]

3102

主题

3503

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
272470
发表于 2023-6-1 21:18:48 | 显示全部楼层 |阅读模式

直接上代码:

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

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

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

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


  24.     <style>
  25.         .deletePopup {
  26.             position: fixed;
  27.             bottom: 0;
  28.             left: 0;
  29.             width: 100%;
  30.             height: 100vh;
  31.             z-index: 99999999888;
  32.             background-color: rgba(0, 0, 0, .5);
  33.         }

  34.         .bottomTwo {
  35.             background-color: #FFFFFF;
  36.             position: absolute;
  37.             bottom: 0;
  38.             width: 100%;
  39.             height: 1rem;
  40.             border-radius: 0.15rem .15rem 0 0;

  41.         }

  42.         .animetion {
  43.             animation: animate .5s;
  44.             overflow: hidden;
  45.         }

  46.         .delect {
  47.             width: 100%;
  48.             padding: .1rem;
  49.             text-align: center;
  50.             color: red;
  51.             font-size: .16rem;
  52.         }

  53.         .callLine {
  54.             width: 100%;
  55.             height: .08rem;
  56.             background-color: #F5F6F7;
  57.         }

  58.         .cancel {
  59.             width: 100%;
  60.             padding: .1rem;
  61.             text-align: center;
  62.             color: #000;
  63.             font-size: .16rem;
  64.         }



  65.         @keyframes animate {
  66.             from {
  67.                 height: 0px;
  68.                 top: 100vh;
  69.             }

  70.             to {
  71.                 height: 100vh;
  72.                 top: 85vh;

  73.             }
  74.         }

  75.         .reviewName {
  76.             padding: 0.08rem;
  77.             font-size: 0.1rem;
  78.             font-family: Source Han Sans CN;
  79.             font-weight: 400;
  80.             color: #282828;
  81.         }

  82.         .reviewName span {
  83.             color: #CB6461;
  84.         }
  85.     </style>

  86.     <script>
  87.         //打开窗口
  88.         $(".reviewName").click(function (e) {
  89.             $("#maskID").show();
  90.             $(".bottomTwo").show();

  91.         });
  92.         //关闭窗口
  93.         $('#cancelID').on('click', function (e) {
  94.             $(".bottomTwo").slideUp("slow", function () {
  95.                 $(".deletePopup").hide();
  96.             });
  97.         })


  98.         //h5适配
  99.         function recalc() {
  100.             var h = document.getElementById('html');
  101.             var w = document.documentElement.clientWidth;
  102.             // d代表设计宽度
  103.             var d = 375;
  104.             if (w >= 769) {
  105.                 h.style.fontSize = '240px';
  106.             } else {
  107.                 h.style.fontSize = w / d * 100 + 'px';
  108.             }
  109.         }
  110.         window.addEventListener("resize", recalc, false);
  111.         document.addEventListener('DOMContentLoaded', recalc, false);
  112.     </script>

  113. </body>

  114. </html>
复制代码

看下效果:



您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-5-23 14:51 , Processed in 0.036710 second(s), 16 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明