CSS实现跳动的心脏

最新推荐文章于 2023-04-09 20:47:35 发布

s_meng_

最新推荐文章于 2023-04-09 20:47:35 发布

阅读量700

点赞数 1

分类专栏：前端文章标签： css3 css html

本文链接：https://blog.csdn.net/s_meng_/article/details/116278286

版权

前端专栏收录该内容

39 篇文章 2 订阅

订阅专栏

今天中午吃饭的时候在b站上边看了一个直播，教的是用CSS做出一个跳动的心脏，下午放学后，我自己试着写了出来，有兴趣的可以看下，有不足的地方感谢指导，下面直接附上源码。

HTML页面

/*
 *  思路:
 *       1. 将心脏部分包含在一个盒子内.
 *       2. 在心脏盒子内准备两个小盒子,让小盒子浮动,在同一行显示.
 *       3. 给两个小盒子设置圆角边框.
 *       4. 让两个小盒子进行旋转和平移
 *       5. 给两个小盒子设置盒子阴影
 *       6. 给外边的心脏盒子添加放大和缩小动画
 */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱心跳动</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
	//将心脏包含在一个盒子内
    <div class="heart">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

CSS页面

body {
    margin: 0;
    padding: 0;
    background-color: #000;
}

.heart {
    width: 300px;
    height: 300px;
    margin: 200px auto;
    /* 开始动画 名字 时间 循环 逆序 */
    animation: beat 1s infinite reverse;
}

.left,
.right {
    float: left;
    width: 130px;
    height: 210px;
    background-color: #f2bbba;
    /* 两个盒子设置圆角边框 */
    border-radius: 75px 75px 0 0;
    /* 心脏阴影设置 */
    box-shadow: 0 0 55px #f2bbba;
}

.left {
    /* 心脏盒子内两个盒子的平移和旋转 */
    transform: translate(50px) rotate(-45deg);
}

.right {
    transform: translate(-23px) rotate(45deg);
}

/* 制定动画 */
@keyframes beat {
    0% {
        transform: scale(1);
    }

    100% {
    	/* 放大1.2倍 */
        transform: scale(1.2);
    }
}

成品图是一个在页面中自己跳动的心脏:
在这里插入图片描述

以上就是跳动的心脏实现的步骤，若有错误或者不完善的地方，欢迎你在评论区指正。

s_meng_

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS实现跳动的心脏

今天中午吃饭的时候在b站上边看了一个直播，教的是用CSS做出一个跳动的心脏，下午放学后，我自己试着写了出来，有兴趣的可以看下，有不足的地方感谢指导，下面直接附上源码。HTML页面/* * 思路: * 1. 将心脏部分包含在一个盒子内. * 2. 在心脏盒子内准备两个小盒子,让小盒子浮动,在同一行显示. * 3. 给两个小盒子设置圆角边框. * 4. 让两个小盒子进行旋转和平移 * 5. 给两个小盒子设置盒子阴影 *
复制链接

扫一扫