css3动画之上下弹跳

最新推荐文章于 2024-08-24 04:32:43 发布

柚稚zr

最新推荐文章于 2024-08-24 04:32:43 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签： css3动画弹跳动画

本文链接：https://blog.csdn.net/bulabulahei/article/details/103476171

版权

前端专栏收录该内容

46 篇文章 8 订阅

订阅专栏

在这里插入图片描述

需求：

实现小球的上下弹跳，模拟在向下时模拟受重力效果而产生变形

代码：

<!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>
            #redball {
            border-radius: 50%;
            width: 20vw; height: 20vw;
            background-image: radial-gradient(ellipse farthest-corner at 25% 25%, #f00,#000);
            margin: 0 auto;
            }    
            @keyframes bounce {
                /* scaleY(.98) 模拟的是球落下的时候，受重力影响而产生的变形 */
                from, to {
                transform: translateY(300px) scaleY(.98);
                }
                80% {
                transform: translateY(150px) scaleY(1.02);
                }          
            }      
            #redball {
                /* transform-origin: center bottom; */
                /* cubic-bezier是控制变化的速度曲线 */
                animation: bounce 5s cubic-bezier(0.30, 2.40, 0.85, 2.50) infinite;
            }  
        </style>
</head>
<body>
        <div id="redball"></div>  
</body>
</html>