今天小编跟大家讲解下有关CSS画心形和蛋形 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS画心形和蛋形 的相关资料，希望小伙伴们看了有所帮助。
一、心形使用transform-origin属性实现设置不同的点为原点
1、改变元素基点transform-origin（transform-origin是变形原点，原点就是元素绕着旋转或变形的点）
注意：该属性只有在设置了transform属性的时候才起作用；
如果在不设置的情况下，元素的基点默认的是其中心位置。即，在没有使用transform-origin属性的情况下transform的rotate,translate,scale,skew,matrix这些操作都是以自身在中心位置为原点的。
transform-origin的用法
语法：-moz-transform-origin: [ || left |center |right ][ || top |center |bottom ]
transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。
2D的变形中的transform-origin属性可以是一个参数值，也可以是两个参数值。如果是两个参数值时，第一值设置水平方向X轴的位置，第二个值是用来设置垂直方向Ｙ轴的位置。
3D的变形中的transform-origin属性还包括了Ｚ轴的第三个值。其各个值的取值简单说明如下：
top = top center = center top等价于 50% 0right = right center = center right等价于 100%或(100% 50%)bottom = bottom center = center bottom等价于 50% 100%left = left center = center left等价于 0或(0 50%)center = center center等价于 50%或（50% 50%）top left = left top等价于 0 0right top = top right等价于 100% 0bottom right = right bottom等价于 100% 100%bottom left = left bottom等价于 0 100%left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%
top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;
如果只取一个值，表示垂直方向值不变。
使用：before和：after伪元素添加内容；
transform-origin属性在浏览器中的支持度不是特别高，所以要记得加上前缀
定位position：relative和absolute
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3</title> <style> .xin{ width:90px; height:80px; position:relative; margin:100px auto; background-color:#99f; } .xin:before{ content:""; position:absolute; width:45px; height:70px; background-color:#f99; border-radius: 50px 50px 0 0; -webkit-transform-origin:0 100% ; -ms-transform-origin:0 100% ; -o-transform-origin:0 100% ; transform-origin:0 100% ; transform:rotate(-45deg); left:45px; } .xin:after{ content:""; position:absolute; width:45px; height:70px; background-color:#9f9; border-radius: 50px 50px 0 0; -webkit-transform-origin:100% 100% ; -ms-transform-origin:100% 100% ; -o-transform-origin:100% 100% ; transform-origin:100% 100% ; transform:rotate(45deg); right:45px; } </style></head><body> <div class="xin"></div></body></html>二、跳动的心上面介绍了如何使用css画出一个心形，如果想实现跳动的心，只需要加上一个animation动画效果即可
心形周围的阴影采用的是filter滤镜属性
filter:drop-shadow(0px 0px 20px rgb(255,20,20));
filter属性中的 drop-shadow(h-shadow v-shadow blur spread color)
实现效果：给图像设置一个阴影效果。
阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在css3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的 box-shadow属性很相似；
不同之处在于，通过filter滤镜，一些浏览器为了更好的性能会提供硬件加速。
h-shadow水平方向阴影，负值会使阴影出现在元素左边；
v-shadow垂直方向的阴影，负值会使阴影出现在元素上方；（h-shadow、v-shadow如果设置值为0之后阴影会出现在元素的正后方）
blur模糊的距离，值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0(则阴影的边界很锐利)
spread正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0(阴影会与元素一样大小)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3</title> <style> .xin{ width:90px; height:80px; position:relative; margin:100px auto; animation: test 1s linear infinite; filter:drop-shadow(0px 0px 20px rgb(255,20,20)); } .xin:before{ content:""; position:absolute; width:45px; height:70px; background-color:red; border-radius: 200px 200px 0 0; -webkit-transform-origin:0 100% ; -ms-transform-origin:0 100% ; -o-transform-origin:0 100% ; transform-origin:0 100% ; transform:rotate(-45deg); left:45px; } .xin:after{ content:""; position:absolute; width:45px; height:70px; background-color:red; border-radius: 200px 200px 0 0; -webkit-transform-origin:100% 100% ; -ms-transform-origin:100% 100% ; -o-transform-origin:100% 100% ; transform-origin:100% 100% ; transform:rotate(45deg); } @keyframes test{ 0%{ transform: scale(0.8,0.8); opacity: 1; } 25%{ transform: scale(1,1); opacity: 0.8; } 100%{ transform: scale(0.8,0.8); opacity: 1; } } </style></head><body> <div class="xin"></div></body></html>三、蛋形border-radius中使用 / 分别设置边框X轴和Y轴的尺寸
按照顺时针顺序，左上-右上-右下-左下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3</title> <style> .egg{ width:126px; height:180px; background-color:#fa3; margin:100px auto; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; } </style></head><body> <div class="egg"></div></body></html>来源：爱蒂网
