效果图
实现思路
设置一个版心，搞一个大盒子，大盒子是信封的样子，然后通过无序列表实现心和漂浮的心，最后在通过动画的方式，心得跳动
排版样式
<div id="app"> <!-- 信封盒子 --> <div class="envelope"> </div> <!-- 爱心 --> <ul class="heart"> <li></li> <!-- 漂浮的爱心 --> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
信封
通过给盒子的宽高，用边框描述出来盒子的样子，最后通过伪元素结合定位的方式，实现信封的样式
.envelope { position: relative; width: 400px; height: 200px; border: 10px solid #e76978; overflow: hidden; }
然后给伪元素宽和高，设置一个直角边框
在通过旋转属性实现信封的大致样式，信封需要俩个三角形，然后旋转到对应的角度在通过定位实现
这里要注意的是，上面直角的伪元素需要设置背景色，如果不设置背景色就会透过去
/* 边框 */ .envelope::after, .envelope::before { content: ''; width: 280px; height: 280px; border-top: 10px solid #e76978; border-right: 10px solid #e76978; position: absolute; } .envelope::after { transform: rotate(135deg); top: -148px; left: 53px; background: #fff; } .envelope::before { transform: rotate(-45deg); bottom: -148px; left: 53px; }
爱心的实现
接下来我们来实现爱心，爱心其实很简单,我们给ul一个宽高，给一个颜色大致样式在结合定位的方式放到信封的正中间
现在开始画爱心，首先我们通过旋转属性旋转到一个合适的角度，在通过给伪元素给设置一个宽和高，我们这里宽和高是继承父级的，然后在通过定位的方式，定位到俩侧就可以了，最后需要在给个边框阴影显得更像一些
.heart, .heart>li { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; background: #ff1414; z-index: 10; } .heart { transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 15px #ff1414; cursor: pointer; } /* 左爱心 */ .heart>li::before, .heart:before { content: ""; position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; background-color: #ff1414; transform: translateY(-50%); border-radius: 50%; } /* 右爱心 */ .heart>li::after, .heart:after { content: ""; position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; background-color: #ff1414; transform: translateX(-50%); border-radius: 50%; } /* 爱心 End */
然后我们在通过动画结合css属性的方式实现，心会跳动的样子
@keyframes beatHeart { 0% { transform: translate(-50%, -50%) scale(1); } 30% { transform: translate(-50%, -50%) scale(1.2); } 50% { transform: translate(-50%, -50%) scale(1.5); } 70% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); } }
最后实现漂浮的动画，这里漂浮的动画，我们采用了定位的方式进行实现
、 /* 漂浮动画 */ @keyframes beatHeart1 { from { top: -20px; left: 0; transform: scale(0.25) rotate(45deg); opacity: 1; } to { top: -200px; left: 0; transform: scale(1) rotate(50deg); opacity: 0; } } @keyframes beatHeart2 { from { top: -10px; left: -10px; transform: scale(0.25) rotate(-20deg); opacity: 0.2; } to { top: -200px; left: 10px; transform: scale(1) rotate(45deg); opacity: 0; } } @keyframes beatHeart3 { from { top: -10px; left: 10px; transform: scale(0.25) rotate(20deg); opacity: 0.2; } to { top: -200px; left: -100px; transform: scale(1) rotate(60deg); opacity: 0; } } @keyframes beatHeart4 { from { top: -20px; left: -10px; transform: scale(0.25) rotate(45deg); opacity: 0.2; } to { top: -200px; left: -10px; transform: scale(1) rotate(80deg); opacity: 0; } }
