纯 css 爱心代码 - 最近超级火的打火机与公主裙中的爱心代码（简易版）

作者：肥晨

2022-11-06
江苏
本文字数：999 字
阅读完需：约 3 分钟

最近打火机与公主裙中的爱心代码超级火，看着特别心动，让俺用 css 来写个简易版！！！

先看效果：

代码拆解：

主要是分为 3 大部分

分子颗粒
爱心
动画

代码实现：

分子颗粒

分子颗粒其实非常简单，主要是使用到的就是 css 的渐变：linear-gradient，然后再用 css3 新出的 background-size 来控制颗粒之间的距离。控制 linear-gradient 的角度，只展示出一个点。

这是 background-size 控制在 10 像素之间的效果。

background: linear-gradient(148deg, #f00, transparent 2px),linear-gradient(45deg, pink 0px, transparent 3px);
background-size: 10px 10px;

复制代码

爱心

爱心其实更加简单，使用伪元素::after 和::before 做出两个圆，然后用定位调整一下位置。


.loveMargin {  width: 300px;  height: 300px;  background: linear-gradient(148deg, #f00, transparent 2px), linear-gradient(45deg, pink 0px, transparent 3px);  background-size: 10px 10px;  position: relative;}
.loveMargin::after {  content: '';  position: absolute;  left: 0px;  top: -142px;  width: 300px;  height: 300px;  background: linear-gradient(148deg, #f00, transparent 2px), linear-gradient(45deg, pink 0px, transparent 3px);  background-size: 10px 10px;  border-radius: 50%;}
.loveMargin::before {  content: '';  position: absolute;  left: -137px;  width: 300px;  height: 300px;  background: linear-gradient(148deg, #f00, transparent 2px), linear-gradient(45deg, pink 0px, transparent 3px);  background-size: 10px 10px;  border-radius: 50%;
}

复制代码

动画效果

心动的效果，其实主要就是放大和缩小，用到 transform 中的 scale()。再用动画 @keyframes 控制关键帧来实现。不停的心动主要使用的是 animation 中的 infinite 属性。

animation: scaleDraw 3s infinite;-webkit-animation: scaleDraw 3s infinite;

复制代码

@keyframes scaleDraw {
/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
0% {
transform: scale(1);/*开始为原始大小*/
}
50% {
transform: scale(1.1);
/*放大1.1倍*/
}
100% {
transform: scale(1);
/*开始为原始大小*/
}
}

复制代码

将这些效果合并，并且调整，就能变成一个低配版的打火机与公主裙中的爱心代码效果啦～

获取地址链接: https://pan.baidu.com/s/1su-DPYYjg_vW2nTpE2RnOA?pwd=uifz 提取码: uifz

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/5eeefd5ab3a78b2a7427bb144】。文章转载请联系作者。

肥晨

关注

还未添加个人签名 2021-04-15 加入

平台：InfoQ、阿里云、腾讯云、CSDN、掘金、博客园等平台创作者领域：前端公众号：农民工前端

发布

暂无评论

创作场景

纯 css 爱心代码 - 最近超级火的打火机与公主裙中的爱心代码（简易版）

先看效果：

代码拆解：

代码实现：

分子颗粒

爱心

动画效果

肥晨

评论