css 怎样给div下拉菜单添加过渡动画效果

灰太狼 2021-10-19 05:50 644阅读 0赞

## css transition可以让元素的属性在变化的时候有一些动画效果   比如高度从30变成300,这样就会让人机交互更自然，比如鼠标经过下拉菜单显示之类的   通过transition可以给指定属性添加动画效果   请看代码   transition: all 表示所有属性，当然，你可以根据自己需要指定某些属性，比如width   500ms表示的是从开始到结束过渡的时间 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .box{
                width: 200px;
                height: 30px;
                background: skyblue;
                transition: all 500ms;
            }
            .box:hover{
                height: 300px;
                transition: all 500ms;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    </html>

# 当然还可以设置过渡的速率以及开始时间，具体更多到w3c等查看文档 #

[https://www.w3school.com.cn/cssref/pr\_transition.asp][https_www.w3school.com.cn_cssref_pr_transition.asp]

[https_www.w3school.com.cn_cssref_pr_transition.asp]: https://www.w3school.com.cn/cssref/pr_transition.asp

发表评论取消回复

表情：

评论列表（有 0 条评论，644人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS模拟下拉菜单

啥也不说了直接上菜（怎么实现的注解里有） <!DOCTYPE html> <html> <head> <meta chars

亦凉/ 2022年11月21日 11:37/ 0 赞/ 184 阅读

相关 java 下拉框响应_JAVA给下拉菜单添加事件响应

首先内隐类的位置，应该放在为它生成对象之前(即放在MyListener s = new MyListener)之前。使用内隐类的典型做法是，外围的class有一个函数，可以传

蔚落/ 2022年10月23日 11:22/ 0 赞/ 132 阅读

相关 CSS过渡效果

过渡定义：过渡用于指定一个或多个属性发生变化时的切换方式，可以提高用户属性，transition 具体属性： transition-property:指定

喜欢ヅ旅行/ 2022年09月04日 08:59/ 0 赞/ 158 阅读

相关微信小程序CSS3动画下拉菜单

微信小程序没有自带的下拉菜单组件，因此我们需要自己需要写一个思路利用列表来存储菜单项，在外面套一个view元素作为外框，将其设置为overflow：hidden，使

柔光的暖阳◎/ 2022年05月22日 06:18/ 0 赞/ 170 阅读

相关经典的 div + css 鼠标 hover 下拉菜单

经典的 div + css 鼠标 hover 下拉菜单效果图： ![1483449-20181104185155190-1995357583.gif][] 源码：

骑猪看日落/ 2022年04月18日 02:35/ 0 赞/ 295 阅读

相关 CSS3动画（一）、transition过渡效果； + 示例

![在这里插入图片描述][70] 支持 transition 的浏览器，兼容性图表： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naG

绝地灬酷狼/ 2022年03月16日 08:42/ 0 赞/ 333 阅读

相关导航下拉菜单效果

以下是首页包含的TOP.htm文件 <link href="js/menu\_style.css" rel="stylesheet" type="text/css" />

港控/mmm°/ 2021年12月20日 02:11/ 0 赞/ 346 阅读

相关 css 怎样给div下拉菜单添加过渡动画效果

css transition可以让元素的属性在变化的时候有一些动画效果比如高度从30变成300,这样就会让人机交互更自然，比如鼠标经过下拉菜单显示之类的通过tra

灰太狼/ 2021年10月19日 05:50/ 0 赞/ 645 阅读

相关 css 下拉菜单

<style type="text/css"> \ \{ margin: 0px; padding:

迈不过友情╰/ 2021年09月30日 00:44/ 0 赞/ 429 阅读

相关 css下拉菜单

基本下拉菜单当鼠标移动到指定元素上时，会出现下拉菜单。 .dropdown \{ position: relative; display:

Love The Way You Lie/ 2021年09月15日 06:24/ 0 赞/ 442 阅读