码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • html+css+js实现高度过渡效果


    DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Documenttitle>
        <style>
          .container {
            position: relative;
          }
          .nav {
            width: fit-content;
            padding: 5px 10px;
            border-radius: 5px;
            background-color: orange;
            color: white;
            cursor: pointer;
          }
          .nav:hover {
            background-color: orangered;
          }
          .nav:hover ~ .content {
            height: var(--height--);
          }
          .content {
            position: absolute;
            top: 40px;
            width: 200px;
            height: 0;
            overflow: hidden;
            background-color: skyblue;
            transition: all 0.5s;
            border-radius: 5px;
          }
        style>
      head>
      <body>
        <div class="container">
          <div class="nav">下拉div>
          <div class="content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto praesentium sunt ea alias at
            cumque nostrum impedit eveniet, excepturi aliquid nesciunt ut. Nobis placeat excepturi
            sapiente, dolorem quia perferendis aspernatur? Veniam asperiores illo qui optio rem
          div>
        div>
        <script>
          const el = document.querySelector('.content'),
            height = el.scrollHeight;
          el.style.setProperty('--height--', height + 'px');
        script>
      body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52

    在这里插入图片描述

  • 相关阅读:
    手写数字图片识别——DL 入门案例
    java面试基础知识
    超越幻觉:AI在创建信任感医疗记录中的新突破!
    淘宝/天猫优惠券查询 API 返回值说明
    SpringBoot项目如何引入外部jar及将外部jar打包到项目发布jar包
    Linux 文件操作(一) —— 遍历指定目录下的所有文件
    解决鸿蒙模拟器卡顿的问题
    Java 记录(7)多线程使用(异步)
    不是单例的单例——巧用ClassLoader
    南卡和鸿中这两款电容笔哪一款更好?实惠的平替电容笔对比
  • 原文地址:https://blog.csdn.net/m0_46219714/article/details/133611558
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号