使用css+html实现爱心动画

最新推荐文章于 2025-08-28 18:00:28 发布

原创

最新推荐文章于 2025-08-28 18:00:28 发布 · 1.6k 阅读

标签

#css #html

收录于

本文详细介绍了如何利用CSS和HTML结合，设计并实现一个动态的爱心效果。通过设置关键帧动画，使得爱心能够持续不断地跳动，为网页增添生动有趣的元素。适合前端开发者学习和参考。

<!DOCTYPE html>
<head>
<meta charset="utf-8">
    <style>
        body{
   
   
            height: 100vh;
            background: #000;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        ul{
   
   
            height: 200px;
            display: flex;
        }
        li{
   
   
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background: red;
            margin-right: 20px;
        }
        li:nth-child(1){
   
   
            background: red;
            animation: love1 4s 0s infinite;
        }
        li:nth-child(2){
   
   
            background: darkturquoise;
            animation: love2 4s 0.2s infinite;
        }
        li