我爱 CSS

我喜欢将 CSS 视为一种爱情语言。 如果写得很好，它可以像诗歌一样美丽。 它有规则、语义，并且像爱情本身一样，可以用多种方式表达。 考虑一下我们在 CSS 中编写 black 的各种选项：

• #000000
• #000
• rgb(0, 0, 0)
• hsla(360, 100%, 0%, 1)
• black

本着情人节的精神，我认为用 HTML 和 CSS 的多种方法制作爱心会很有趣。

普通背景图像

我们可以调用爱心图像并将其设置为元素的背景。

.heart {
  background-image: url("heart.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

查看 CodePen 中的示例 我爱你 - 背景图像，由 CSS-Tricks（@css-tricks）创建，在 CodePen 上。

HTML 和 ASCII 符号

没错。 我们可以让网页帮我们绘制。

.heart {
  content: '&#9829';
}

查看 CodePen 中的示例 我爱你 - ASCII，由 CSS-Tricks（@css-tricks）创建，在 CodePen 上。

CSS 形状

现实生活中爱心很复杂，但在 CSS 中它们仅仅是两个圆圈和一个旋转的正方形。

借助 ::before 和 ::after 伪元素，我们可以用单个元素绘制出来。

.heart {
  background-color: red;
  display: inline-block;
  height: 30px;
  margin: 0 10px;
  position: relative;
  top: 0;
  transform: rotate(-45deg);
  width: 30px;
}

.heart:before,
.heart:after {
  content: "";
  background-color: red;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  width: 30px;
}

.heart:before {
  top: -15px;
  left: 0;
}

.heart:after {
  left: 15px;
  top: 0;
}

查看 CodePen 中的示例 我爱你 - CSS 形状，由 CSS-Tricks（@css-tricks）创建，在 CodePen 上。

图标字体

图标字体 在与内联 SVG 的笼斗中惨败，但它们在这里仍然有效。 我们需要我们的爱心图标以各种字体文件格式，并使用 @font-face 应用它，但我们将使用 我们热爱图标字体网站 为我们生成它。

@import url(http://weloveiconfonts.com/api/?family=entypo);

[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
  color: red;
}

查看 CodePen 中的示例 我爱你 - 图标字体，由 CSS-Tricks（@css-tricks）创建，在 CodePen 上。

内联 SVG

好吧，这并不完全是 CSS，但我们喜欢 CSS-Tricks 中的 SVG。

I 

<svg class="heart" viewBox="0 0 32 29.6">
  <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
	c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg> 

You

让我们添加一个脉冲动画，仅仅是为了借此机会撒一些 CSS。

.heart {
  fill: red;
  position: relative;
  top: 5px;
  width: 50px;
  animation: pulse 1s ease infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

查看 CodePen 中的示例 我爱你 - SVG，由 CSS-Tricks（@css-tricks）创建，在 CodePen 上。

分享爱

毫无疑问，我们可以用更多方法来实现它。 在评论中分享您的 CodePen，我们将将其添加到 收藏集 中。

当然，祝您情人节快乐（有点迟了）！