欢迎您的访问
专注架构,Java,数据结构算法,Python技术分享

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


theme: cyanosis

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

先看效果:

9F7EFFC1F33D766F83F3899F36FF4CF1.gif

代码拆解:

主要是分为3大部分

  1. 分子颗粒
  2. 爱心
  3. 动画

代码实现:

分子颗粒

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

image.png

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

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

background-size: 10px 10px;

爱心

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

image.png


.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属性。

D8411960531FFACF8FA9A32F0CA641F0.gif

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

赞(0) 打赏
版权归原创作者所有,任何形式转载请联系作者;码农code之路 » 纯css爱心代码-最近超级火的打火机与公主裙中的爱心代码(简易版)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏