<>使用CSS制作beating heart的动画

* 首先制作一个位置完全居中的红色正方形。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <
title>A beating heart</title> <style type="text/css"> * { margin: 0; padding: 0;
}#div1 { width: 100px; height: 100px; background-color: red; position: absolute;
left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; } </style> </head> <
div id="div1"> </div>
* 将正方形添加两个半圆改造成一颗爱心
以下为部分代码
#lefthalf { width: 50px; height: 100px; background-color: red; position:
absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -50px; float:
left; border-radius: 50px 0px 0px 50px; } #righthalf { width: 100px; height:
50px; background-color: red; position: absolute; left: 50%; top: 50%;
margin-left: -50px; margin-top: -100px; border-radius: 50px 50px 0px 0px; }
由于整个图像是倾斜的,我们需要将整个心形正立,因此做旋转处理,并加入跳动的动画,最终的完整代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>A beating heart</
title> <style type="text/css"> * { margin: 0; padding: 0; } #div1 { width: 100px
; height: 100px; background-color: red; position: absolute; left: 50%; top: 50%;
margin-left: -50px; margin-top: -50px; } #lefthalf { width: 50px; height: 100px;
background-color: red; position: absolute; left: 50%; top: 50%; margin-left:
-100px; margin-top: -50px; float: left; border-radius: 50px 0px 0px 50px; }
#righthalf { width: 100px; height: 50px; background-color: red; position:
absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -100px;
border-radius: 50px 50px 0px 0px; } @keyframes scaleDraw { 50% { transform:
rotate(45deg) scale(0.7); } 75% { transform: rotate(45deg) scale(1.5); } }
#heart { width: 100px; height: 150px; position: absolute; left: 50%; top: 50%;
margin-top: -40px; transform: rotate(45deg); -webkit-animation-name: scaleDraw;
animation-iteration-count: infinite; -webkit-animation-duration: 1s; } </style>
</head> <body> <div id="heart"> <div id="lefthalf"> </div> <div id="div1"> </div
> <div id="righthalf"> </div> </div> </body> </html>
效果图:

技术
©2019-2020 Toolsou All rights reserved,
Unity-Demo实例之 ✨ 实现UI-背包装备拖拽功能计算机网络---计算机网络基本概念(协议、体系)某东14薪变16薪,是诚意还是套路?让人意想不到的Python之樱花树(turtle库的华丽样式)java四大函数式接口(重点,简单)06【若依框架解读】数据范围过滤--太牛了Unity3D之UGUI基础--画布的三种模式os模块的简单使用html写樱花树,写樱花树的作文