CSS实现跳动的心脏
今天中午吃饭的时候在b站上边看了一个直播，教的是用CSS做出一个跳动的心脏，下午放学后，我自己试着写了出来，有兴趣的可以看下，有不足的地方感谢指导，下面直接附上源码。
HTML页面
/** 思路:* 1. 将心脏部分包含在一个盒子内.* 2. 在心脏盒子内准备两个小盒子,让小盒子浮动,在同一行显示.* 3. 给两个小盒子设置圆角边框.* 4. 让两个小盒子进行旋转和平移* 5. 给两个小盒子设置盒子阴影* 6. 给外边的心脏盒子添加放大和缩小动画*/
<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);}
}
成品图是一个在页面中自己跳动的心脏:
以上就是跳动的心脏实现的步骤，若有错误或者不完善的地方，欢迎你在评论区指正。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！