编码爱情诗,你知道多少种画心的方法 CSS 文章

Estimated read time 1 min read

#code情诗#我参加“JUEJIN FRIENDS表白计划”

本文教你多种绘制爱情的方法,让你在520再也不用担心孤独、丧偶。

文字爱

首先,我们来做最简单的一个,使用文本图标心形。 心脏的unicode编码是♥

因为是图形文本,所以我们可以直接使用字体来设置颜色和大小。

<divclass="heart">div>

 

body { 
 text-align: center; 
}
.heart {
 font-size: 150px;
 color: #e00;
 transform-origin: center;
}

 

使用上面的代码,我们可以生成一个红心。

image.png/

纯粹的爱情并不美丽,我们让它动起来,以表达我们热烈的真诚。 设置缩放动画以放大和缩小。

@keyframes beat{
 to { transform: scale(1.4); }
}
// 添加动画效果
.heart{
 animation: beat .25s infinite alternate;
}

 

heart.gif/

光有诚意是不够的。 如果你不明白怎么办? 在心形下方添加一行文字。 具体文字由你决定。 这里,用的是follow your heart。 完整的效果就实现了,具体代码参考掘金上的代码。

爵金 (juejin.cn)

CSS 实现爱

CSS love 是通过伪元素 :after 和 :before 实现的。

首先我们定义全局样式。

html,
body {
 width: 100%;
 height: 100%;
 min-width: 500px;
 min-height: 500px;
 overflow: hidden;
}

 

然后设置heart类的位置,使用负margin值的绝对定位,实现水平和垂直居中的效果。

.heart {
 position: absolute;
 width: 100px;
 height: 90px;
 top: 50%;
 left: 50%;
 margin-top: -45px;
 margin-left: -50px;
}

 

这篇文章里对爱情的实现很有趣。 下面大家一定要擦亮眼睛,以免错过精彩。

我们将这两个伪元素定义为顶部的半圆和底部的矩形。 具体代码如下:

image.png/

&:before,
&:after {
 content: ;
 position: absolute;
 top: 0;
 width: 50px;
 height: 80px;
 background: #fc2e5a;
 border-radius: 50px50px00;
}

 

然后我们将 :before 和 :after 伪元素分别旋转 45°。

image.png/

重叠了,没关系,我们分别修改一下两个伪元素的旋转中心。

image.png/

是不是有点尴尬? 最后修改两个伪元素的定位。

image.png/

成功实现,这是完整的代码设置。

&:before {
 left: 50px;
 transform: rotate(-45deg);
 transform-origin: 0100%;
}
&:after {
 left: 0;
 transform: rotate(45deg);
 transform-origin: 100%100%;
}

 

老规矩是,纯粹的爱情并不有趣。 让我们添加动画效果。 这次我们更花哨一点,使用了两种动画效果。 我们修改html格式如下:

<divclass="heart heart-bg">div>
<divclass="heart heart-main">div>

 

内部爱心设置为小范围放大和缩小,外部爱心设置为大范围放大和缩小,以达到爱心提升的效果。 外心同步添加透明度变化效果。

.heart-bg {
 animation: heart-anim 1s linear .4s infinite;
 
 &:before,
 &:after {
 background-color: #ff7693;
 }
}
.heart-main {
 animation: pounding .5s linear infinite alternate;
}
@keyframes pounding {
 0% {
 transform: scale(1.5);
 }
 100% {
 transform: scale(1);
 }
}
@keyframes heart-anim {
 46% {
 transform: scale(1);
 }
 50% {
 transform: scale(1.3);
 }
 52% {
 transform: scale(1.5);
 }
 55% {
 transform: scale(3);
 }
 100% {
 opacity: 0;
 transform: scale(50);
 }
}

 

最终达到的效果:

heart2.gif/

完整代码可以在爵金上找到:爵金(juejin.cn)

You May Also Like

More From Author