心渐变

“我正在参加 码上掘金体验活动，详情：show出你的创意代码块”

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。

实现思路很简单，首先css画心心，然后给心心position定位，再加渐变的动画效果

重点

/*动画效果*/
@keyframes example {
  0%   {background-color: #FC5BC6;}
  25%  {background-color: #EE199E;}
  50%  {background-color: #FD68C9;}
  100% {background-color: #E3088B;}
}
/*使用*/
animation-name: example;
animation-duration: 7s;
/*旋转角度*/
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
/*心的样式*/
.xinxin{
    position: relative;
    width: 200px;
    height: 200px;
    top: 100px;
    left:900px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #FC5BC6;
   animation-name: example;
   animation-duration: 7s;
   opacity: 0.7;
}
.xinxin:before,
.xinxin:after{
    position: absolute;
    width: 200px;
    height: 200px;
    content: '';
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-color: #FC5BC6;
    animation-name: example;
    animation-duration: 7s;
}
.xinxin:before{
    bottom: 0px;
    left: -100px;
}
.xinxin:after{
    top: -100px;
    right: 0px;
}

div布局

<div class="body">
  <div class="xinxin"></div>
  <div class="isxxin"></div>
  <div class="shixxin"></div>
</div>

css样式

.body{
  background-color: #F2A4B1;
  width: 100%;
  height: 450px;
}

.xinxin{
	position: relative;
	width: 200px;
	height: 200px;
  top: 100px;
  left:900px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	background-color: #FC5BC6;
  animation-name: example;
  animation-duration: 7s;
  opacity: 0.7;
}
.xinxin:before,
.xinxin:after{
	position: absolute;
	width: 200px;
	height: 200px;
	content: '';
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	background-color: #FC5BC6;
  animation-name: example;
  animation-duration: 7s;
}
.xinxin:before{
	bottom: 0px;
	left: -100px;
}
.xinxin:after{
	top: -100px;
	right: 0px;
}
@keyframes example {
  0%   {background-color: #FC5BC6;}
  25%  {background-color: #EE199E;}
  50%  {background-color: #FD68C9;}
  100% {background-color: #E3088B;}
}

.isxxin{
	position: relative;
	width: 50px;
	height: 50px;
  top: 10px;
  left:600px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	background-color: #FC5BC6;
  opacity: 1;
}
.isxxin:before,
.isxxin:after{
	position: absolute;
	width: 50px;
	height: 50px;
	content: '';
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	background-color: #FC5BC6;
}
.isxxin:before{
	bottom: 0px;
	left: -25px;
}
.isxxin:after{
	top: -25px;
	right: 0px;
}



.shixxin{
	position: relative;
	width: 50px;
	height: 50px;
  top: 10px;
  left:1300px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	background-color: #FC5BC6;
  opacity: 1;
}
.shixxin:before,
.shixxin:after{
	position: absolute;
	width: 50px;
	height: 50px;
	content: '';
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	background-color: #FC5BC6;
}
.shixxin:before{
	bottom: 0px;
	left: -25px;
}
.shixxin:after{
	top: -25px;
	right: 0px;
}

效果

码上掘金 (juejin.cn)