css进阶一(画个粉粉的爱心)

197 阅读1分钟

刚才女朋友说要花花,摸了摸口袋莫得钱钱 凑合点给她画了个爱心

上来先整个div <div class='love'></div>

紧接着就是一套css组合拳

先这样

    .heart{
		width: 100px;
		height: 100px;
		background-color: pink;
		position: absolute;
		margin: auto;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		transform: rotate(-45deg);
	}

出来个旋转粉粉的四方形

再这样 接着然后又这样

	.heart:after{
		content: "";
		width: 100px;
		height: 100px;
		background-color: pink;
		border-radius: 50%;
		position: absolute;
		top: 0px;
		left: 50px;
	}
	.heart:before{
		content:"";
		background-color: pink;
		width:100px;
		height: 100px;
		border-radius: 50%;
		position: absolute;
		top: -50px;
		left: 0px;
	}

爱心就出来了

喜欢的大佬点个赞呗