首页HTML实现心跳动画效果

HTML实现心跳动画效果

时间: 2024-04-30 14:19:27 浏览: 110

css实现心跳.html

CSS如何做到心跳的动画,如何做到心跳动画? 用纯css写了一个心跳小demo,主要运用了animation、@keyframes和transform,望大家可以借鉴

可以使用CSS3的动画来实现心跳动画效果，下面是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>Heartbeat Animation</title> <style type="text/css"> @keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } .heart { width: 50px; height: 50px; background: red; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: heartbeat 1s ease-in-out infinite; } </style> </head> <body> <div class="heart"></div> </body> </html> ``` 上述代码中，通过 keyframes 定义了一个名为 heartbeat 的动画，其中 transform: scale() 属性用于缩放元素的大小，从而实现心跳效果。在 .heart 类中，使用 animation 属性指定了动画的名称、持续时间、缓动函数和循环次数，从而实现了心跳动画的效果。

阅读全文