七夕-心形表白-简单css代码

今天你要和谁过？

今天你要怎么过？？

今天去哪里吃？？？

公司的三连问，对于一些单身狗有点招架不住啊。

在此送上一个薄礼，来安慰下受伤的心灵...

确定是安慰不是连环打击嘛.....

回答：确定！

来吧**看效果图上代码：（静态图，实际是动态的）

 

HTML:

<div class="warp">
<div class="left"></div>
<div class="right"></div>
<div class="square"></div>
</div>

css:

 

.warp{
width: 500px;
height: 600px;
margin: 70px auto;
/*border:1px solid tomato;写上这个便于确定定位的位置,最后在关掉*/
position: relative;
animation:heart 0.8s linear infinite ;/*动画效果*/
transition:all 0.4s ease ;
}
.left{
width: 300px;
height: 300px;
border-radius:50%;
background-color: tomato;
display: inline-block;
}
.right{
width: 300px;
height: 300px;
border-radius:50%;
background-color: tomato;
position: absolute;
right:0;
top:0;
}
.square{
width: 300px;
height: 300px;
background-color: tomato;
position: absolute;
right:200px;
top:0px;
transform:translate(100px,100px) rotate(45deg);
}
@keyframes heart{
from{
transform: scale(1);
}
to{
transform: scale(1.2);
}
}

 

是连环打击！（开下玩笑，表白❤技巧拿走了吧……）

 

欢迎大家提出宝贵意见，大神们请多多指教。