求《跳动的心》百度网盘在线资源,是JanhviKapoor主演的

发布网友 发布时间：2022-04-27 02:17

我来回答

共2个回答

懂视网 时间：2022-05-12 22:38

不用图片，使用CSS3做出一个跳动的心。

HTML：

首先两个div浮动，左上和右上角变圆：

  .box{
  margin: 100px;
  }
  .left,.right{
  float: left;
  }
  .box div{
  height:160px;
  width: 100px;
  border-radius: 50px 50px 0 0;
  background: red;
  }   

变成：

然后让两个div旋转一下，左边的以右下角为旋转点正时针转45度，右边的以左下角为旋转点逆时针转45度，加点阴影：

.left{ 
  transform-origin: 100% 100%;
  transform: rotate(45deg);
  box-shadow: 8px 10px 10px #888888; 
 }
.right{  
  transform-origin: 0% 100%;
  transform: rotate(-45deg);
  box-shadow: -10px -1px 10px #888888; 
  }

心形出来了：

让心动起来，加点动画吧：

　　　　.box div{
  animation: lb 1s cubic-bezier(0.3,0.4,0.3,1) 0s infinite;
  border: 0px solid red;/*这个不能少*/
 　　　　　　 }
　　　　@keyframes lb{
  0%{
   border: 10px solid red;
   border-radius: 58px 58px 0 0;
  }
  50%{
   border: 20px solid red;
   border-radius: 66px 66px 0 0;
  }
  100%{
   border:0px solid red;
   border-radius: 50px 50px 0 0;
  }
  }

好了，一颗跳动的心就完成了。

完整CSS：

热心网友 时间：2022-05-12 19:46

链接: