首页css抛物线动画效果

css抛物线动画效果

时间: 2024-03-29 22:33:24 浏览: 16

CSS抛物线动画效果可以通过使用CSS的`@keyframes`和`animation`属性来实现。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <style> .parabolic-animation { position: relative; animation: parabolic 2s ease-in-out infinite; } @keyframes parabolic { 0% { top: 0; left: 0; } 50% { top: -200px; left: 200px; } 100% { top: 0; left: 400px; } } </style> </head> <body> <div class="parabolic-animation">Hello, CSS Parabolic Animation!</div> </body> </html> ``` 在上面的代码中，我们创建了一个名为`parabolic-animation`的CSS类，通过`position: relative;`设置元素的定位方式为相对定位。然后，我们使用`@keyframes`定义了一个名为`parabolic`的动画，该动画在0%、50%和100%的关键帧位置分别设置了元素的top和left属性值，实现了抛物线的效果。最后，我们将该动画应用到具有`parabolic-animation`类的元素上，通过`animation`属性设置动画名称、持续时间、缓动函数和循环次数。