转~~爱心跳动砰砰砰！！！！

最新推荐文章于 2025-08-20 07:59:24 发布

weixin_30501857

最新推荐文章于 2025-08-20 07:59:24 发布

阅读量129

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xianfei689/p/5892040.html

本文介绍了一种使用纯CSS实现的跳动心形动画效果。通过巧妙设置元素的旋转角度及阴影，构造出心形的基本形状，并利用关键帧动画实现了心跳般的脉动效果。

<!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
    }
}