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

最新推荐文章于 2024-04-25 16:16:15 发布

woshidamimi0

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量7.2k

点赞数 1

分类专栏： css html

本文链接：https://blog.csdn.net/woshidamimi0/article/details/99692160

版权

css 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html

10 篇文章 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

woshidamimi0

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 怎样给div下拉菜单添加过渡动画效果

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

扫一扫