html + css 实现一个跳动的心脏

最新推荐文章于 2024-04-26 11:04:18 发布

疯魔coding君

最新推荐文章于 2024-04-26 11:04:18 发布

阅读量5.5k

点赞数 8

分类专栏：前端开发学习笔记文章标签： html css

本文链接：https://blog.csdn.net/qq_44214671/article/details/112466023

版权

前端开发学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

利用 html 和 css 可以实现一个心脏，使用 css 动画效果就可以使心脏跳动起来，整个效果图如下：
在这里插入图片描述
使用两个圆形 div 和一个矩形 div 就能拼接成一个心脏，以下附上完整的源代码（其中 audio 标签中引入 img 文件夹下的 heart.wav 音频文件，可到网上自行下载）：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>跳动的心脏</title>
    <style>
        body{
            background-color: #FFA5A5;
        }
        .hrt{
            width: 200px;
            height: 200px;
            background-color: #d5093c;
            box-shadow: 0 0 70px #d5093c;
            animation: sport 1s infinite;
        }
        .lef{
            border-radius: 100px;
            position: absolute;
            top: 200px;
            left: 200px;
        }
        .rig{
            border-radius: 100px;
            position: absolute;
            top: 200px;
            left: 341px;
        }
        .cen{
            transform: rotate(45deg);
            position: absolute;
            top: 269px;
            left: 271px;
        }
        @keyframes sport {
            0%{transform: scale(1) rotate(45deg);}
            50%{transform: scale(1.1) rotate(45deg);}
            100%{transform: scale(1) rotate(45deg);}
        }
    </style>
</head>
<body>
<div class="hrt lef"></div>
<div class="hrt cen"></div>
<div class="hrt rig"></div>
<!--心脏跳动声-->
<audio src="img/heart.wav" autoplay="autoplay" loop="loop"></audio>
</body>
</html>

Tips：自动加载音频文件的时候，开始如果没声音的话，多刷新几次即可。

疯魔coding君

关注

8
点赞
踩
17

收藏

觉得还不错? 一键收藏
2
评论
html + css 实现一个跳动的心脏

利用 html 和 css 可以实现一个心脏，使用 css 动画效果就可以使心脏跳动起来，整个效果图如下：使用两个圆形 div 和一个矩形 div 就能拼接成一个心脏，以下附上完整的源代码（其中 audio 标签中引入 img 文件夹下的 heart.wav 音频文件，可到网上自行下载）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>
复制链接

扫一扫

专栏目录