七夕-心形表白-简单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);
}
}

 

是连环打击!(开下玩笑,表白❤技巧拿走了吧……)

 

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

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM