首页 前端知识 跳动的爱心代码(纯html和css实现)

跳动的爱心代码(纯html和css实现)

2024-07-10 22:07:43 前端知识 前端哥 794 675 我要收藏
一、具体实现的效果如下:

在这里插入图片描述

二、源码如下:
<!--
 * @Author: 不知名的kai
 * @description: 跳动的爱心
 * @param: 
 * @return: 
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Love Heart</title>
  <style>
    .heart-container {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 100px auto;
        /* 心脏跳动的一个动画效果的持续时间及持续多久,这里是持续时间为1s,次数是无限次循环播放 */
        animation: heartbeat 1s infinite;
    }

    .heart {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgb(229, 61, 148);
        transform: rotate(-45deg);
    }

    .heart::before,
    .heart::after {
        position: absolute;
        content: "";
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: rgb(229, 61, 148);
    }

    .heart::before {
        top: -50px;
        left: 0;
    }

    .heart::after {
        top: 0;
        left: 50px;
    }

    /* 自定义动画效果,爱心的放大和缩小 */
    @keyframes heartbeat {
        0% { transform: scale(0.8); }
        50% { transform: scale(1.2); }
        100% { transform: scale(0.8); }
    }
  </style>
</head>
<body>
  <div class="heart-container">
    <div class="heart"></div>
  </div>
</body>
</html>

如果觉得还不错的话,也可以手动点个赞吧!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13924.html
标签
评论
发布的文章

jQuery-w3school(2020

2024-08-04 23:08:08

jQuery常用方法总结

2024-08-04 23:08:34

Vue2使用echarts树图(tree)

2024-08-04 23:08:29

图表库-Echarts

2024-08-04 23:08:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!