<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跳动的心</title>
<style type="text/css">
.box { margin: 100px }
.left,
.right { float: left }
.box div { height: 160px; width: 100px; border-radius: 50px 50px 0 0; background: red }
.left { transform-origin: 100% 100%; transform: rotate(45deg); box-shadow: 8px 10px 10px #888888 }
.right { transform-origin: 0% 100%; transform: rotate(-45deg); box-shadow: -10px -1px 10px #888888 }
.box div { animation: lb 1s cubic-bezier(0.3, 0.4, 0.3, 1) 0s infinite; border: 0px solid red }
@keyframes lb {
0% { border: 10px solid red; border-radius: 58px 58px 0 0 }
50% { border: 20px solid red; border-radius: 66px 66px 0 0 }
100% { border: 0px solid red; border-radius: 50px 50px 0 0 }
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
效果图：
效果参考 URL: xianfei689.github.io/hg-canvas/pc/heart/heart.html
代码解析：
.box {
margin: 100px
}
.left, .right {
float: left
}
.box div {
height: 160px;
width: 100px;
border-radius: 50px 50px 0 0;
background: red
}
首先是一座小山---》
.left {
transform-origin: 100% 100%;
transform: rotate(45deg);
box-shadow: 8px 10px 10px #888888
}
.right {
transform-origin: 0% 100%;
transform: rotate(-45deg);
box-shadow: -10px -1px 10px #888888
}
last : ---> 动画了
.box div {
animation: lb 1s cubic-bezier(0.3, 0.4, 0.3, 1) 0s infinite;
border: 0px solid red
}
@keyframes lb {
0% {
border: 10px solid red;
border-radius: 58px 58px 0 0
}
50% {
border: 20px solid red;
border-radius: 66px 66px 0 0
}
100% {
border: 0px solid red;
border-radius: 50px 50px 0 0
}
}
时间： 2024-10-08 04:37:04