css3心型文字

CSS3可以制作出很多好看的效果，其中之一就是心型文字效果。下面就来介绍一下如何使用CSS3来制作出这个效果。

.heart {
  width: 100px; /* 确定宽度 */
  height: 90px; /* 确定高度 */
  position: relative; /* 相对定位 */
  font-size: 80px; /* 字体大小 */
  margin: auto; /* 居中显示 */
}
.heart:before,.heart:after {
  position: absolute; /* 绝对定位 */
  content: ""; /* 去掉内容 */
  left: 50px; /* 左边相对定位 */
  top: 0px; /* 上边相对定位 */
  width: 50px; /* 确定宽度 */
  height: 80px; /* 确定高度 */
  background: #E31837; /* 背景色 */
  border-radius: 50px 50px 0 0; /* 圆角 */
  transform: rotate(-45deg); /* 旋转 */
  transform-origin: 0 100%; /* 起点 */
}
.heart:after {
  left: 0px; /* 左边相对定位 */
  transform: rotate(45deg); /* 旋转 */
  transform-origin: 100% 100%; /* 起点 */
}

使用以上代码可以制作出如下的心型文字效果：

love

通过简单的CSS3代码就可以轻松地制作出美丽的心型文字效果。相信这个效果一定能够让你的网页变得更加吸引人。