程序员的浪漫教你表白——用纯css绘制爱心

分享一篇娱乐博客,最为程序员每天与枯燥的代码打交道其实我们也可以浪漫。
代码核心是利用 ::before ::after 这两个CSS伪类来辅助画爱心的两个半圆。以及@keyframes使用规则

@keyframes标签定义及使用说明

使用@keyframes规则，你可以创建动画。
创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中，您可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
0％是开头动画，100％是当动画完成。

爱心制作的详细代码：
HTML部分：

<div class="heart"></div>
	<div class="text">
		换我心，为你心，始知相忆深
	</div>

css部分：

     .heart{
			width: 100px;
			height: 100px;
			background: red;
			margin:100px auto 0;
			position: relative;
			transform: rotate(-45deg);
			animation: heartMove 2s infinite;
		}
		.heart:after{
			display: block;
			content: '';
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background: red;
			position: absolute;
			top: -50px;
			left: 0;
		}
		.heart:before{
			display: block;
			content: '';
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background: red;
			position: absolute;
			right: -50px;
			top: 0;
		}
		@keyframes heartMove{
			0%{
				transform: rotate(-45deg) scale(0.8);
			}
			50%{
				transform: rotate(-45deg) scale(1.2);
			}
			100%{
				transform: rotate(-45deg) scale(0.8);
			}
		}
		.text{
			color: red;
			font-size: 25px;
			width: 400px;
			margin-left:100px;
			font-family: STXihei, "华文细黑";
		}

看看效果图：

gif都是自己截图的有点粗糙别介意哟！
注意：1）使用animation属性来控制动画的外观，给它加一个infinite属性：动画无限演播，就可以看到爱心一直跳动啦！
2） @keyframes 规则 不兼容 IE 9 以及更早版本的浏览器.
再给大家分享一个@keyframes的使用小demo
代码：
HTML部分：

<div class="box">
		<div class="text">
			小姐姐 我钟意你鸭
		</div>

css部分：

body{
		background-color: #0DCBF8;

	}
	.box{
	  width:100%;
	  height:100%;
	  background-color: blue;
	  animation: 5s bigger infinite;
	}
	.text{
		  width:100%;
	  	  height:100%;
	  	text-align: center;
	  	font-size: 150px;
	  	color: #FEFEFE;
	  	animation: 5s show infinite;
	  	text-shadow: -5px -5px 8px white,5px 5px 8px #FEFEFE;

	}
		@keyframes bigger{
			from{
				width: 100px;
				height: 100px;
				background-color: #0DCBF8;

			}
		to{
			width: 100%;
			height: 100%;
			background-color: #0DCBF8;
		}
		}
		@keyframes show{
			from{
				text-shadow: none;
				color: #fff;
				font-size: 12px;
			}
			to{
				text-shadow: -5px -5px 8px white,5px 5px 8px red;
				color: #FEFEFE;
				font-size: 150px;

			}
		}

效果图：

小哥哥们学会了嘛？