animation上下弹跳动画

最新推荐文章于 2024-07-09 09:39:15 发布

原创最新推荐文章于 2024-07-09 09:39:15 发布 · 370 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#动画 #css3 #javascript

笔记专栏收录该内容

17 篇文章

订阅专栏

这篇博客展示了如何使用CSS动画创建一个从底部弹出的圆形对话框。通过定义关键帧动画`fromBottom`，实现了元素从底部向上平滑移动的效果。示例中，`#dialog`元素具有粉色背景，圆形边框，并应用了该动画，使其在页面加载时以无限循环、交替的方式执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <style>
        @keyframes fromBottom {
            0% {
                transform: translateY(100%);
            }

            100% {
                transform: translateY(0%);
            }
        }

        #dialog {
            width: 40px;
            height: 40px;
            border-radius: 50% 50%;
            background-color: pink;
            position: absolute;
            bottom: 50%;
            left: 0;
            z-index: 10;
            /* display: none; */
            flex-direction: row;
            justify-content: center;
            animation: fromBottom 1.5s infinite alternate linear
        }
    </style>
</head>

<body>
    <div id="dialog"></div>
</body>
<script>
</script>

</html>