html-跳动的心

最新推荐文章于 2025-03-01 08:45:26 发布

东方的大熊

最新推荐文章于 2025-03-01 08:45:26 发布

阅读量2.3k

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_28979869/article/details/83211981

版权

html 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了一个情人节主题的心跳动画制作过程，使用HTML和CSS技术，通过关键帧动画实现了一个外圈大心和里面小心的动态效果，展示了两种不同版本的实现方式。

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

第一个版本

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

<head>
    <meta charset="UTF-8" />
    <title>情人节心跳动动画</title>
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            min-width: 500px;
            min-height: 500px;
            overflow: hidden;
        }

        .heart {
            position: absolute;
            width: 100px;
            height: 90px;
            top: 50%;
            left: 50%;
            margin-top: -45px;
            margin-left: -50px;
        }

        .heart:before,
        .heart:after {
            position: absolute;
            content: "";
            left: 50px;
            top: 0;
            width: 50px;
            height: 80px;
            background: #fc2e5a;
            border-radius: 50px 50px 0 0;
            transform: rotate(-45deg);
            transform-origin: 0 100%;
        }

        .heart:after {
            left: 0;
            transform: rotate(45deg);
            transform-origin: 100% 100%;
        }

        .heart1 {
            animation: heart-anim 1s linear .4s infinite;
        }

        .heart2 {
            animation: pounding .5s linear infinite alternate;
        }

        .heart1:after,
        .heart1:before {
            background-color: #ff7693;
        }

        @keyframes pounding {
            0% {
                transform: scale(1.5);
            }

            100% {
                transform: scale(1);
            }
        }

        @keyframes heart-anim {
            46% {

                transform: scale(1);
            }

            50% {
                transform: scale(1.3);
            }

            52% {
                transform: scale(1.5);
            }

            55% {
                transform: scale(3);
            }

            100% {
                opacity: 0;
                transform: scale(50);
            }
        }
    </style>
</head>

<body>
    <!--外圈大心-->
    <div class="heart heart1"></div>
    <!--里面小心-->
    <div class="heart heart2"></div>
</body>

</html>

第二个版本

<!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>index</title>
    <style>
        #box {
            width: 300px;
            height: 300px;
           /* border: 1px solid red;*/
            position: absolute;
            left: calc(50% - 150px);
           /* transform: translate(-50%,0);*/
           top: calc(50% - 150px);
           filter: drop-shadow(0 0 30px  rgb(255,30,30));
           animation-name: heart;
           animation-duration: 0.75s;
           animation-delay: 0s;
           animation-timing-function: ease-in-out;
           animation-iteration-count: infinite;
        }
        #left,#right{
            width: 150px;
            height: 240px;
            background-color:red;
            border-radius: 75px 75px 0 0;
            position: absolute;
        }
        #left{
            transform-origin: 0 100%;
            transform: rotate(-45deg);
            left: 150px;
        }
        #right{
            transform-origin: 100% 100%;
            transform: rotate(45deg);
        }
        @keyframes heart{
            0%{
                transform: scale(0.8,0.8);
                opacity: 1;
            }
            75%{
                transform: scale(1,1);
                opacity: 0.8;
            }
            100%{
                transform: scale(.8,.8);
                opacity: 1;
            }
        }
    </style>
</head>

<body>
  
    <div id="box">
        
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>

</html>