Heart Beat

实现关键：

1.纯css实现心形图（如果使用图片则无需）

html代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width">
 6   <title>JS Bin</title>
 7 </head>
 8 <body>
 9 <div class="heart"></div>
10 </body>
11 </html>

添加基本css：

1 body{
2   background:#ccc;  
3 }
4 .heart{
5   position:relative;
6   height:90px;
7   width:120px;
8   margin:150px auto;
9 }

实现爱心图1：

 1 .heart:before,
 2 .heart:after{
 3   content:"";
 4   position:absolute;
 5   width:60px;
 6   height:80px;
 7   top:0; 
 8   
 9   border-top: 10px #cf2e3b solid;
10   border-radius:50px 50px 0 0;
11 }
12 .heart:before{ 
13   left:60px; 
14   background:#cf2e3b;
15 }
16 .heart:after{
17   background:#cf2e3b;
18 }

实现爱心图2，左半部份逆时针45度，右边顺时针45度

.heart:before,
.heart:after{
  content:"";
  position:absolute;
  width:60px;
  height:80px;
  top:0; 
  
  border-top: 10px #cf2e3b solid;
  border-radius:50px 50px 0 0;
}
.heart:before{ 
  left:60px; 
  background:#cf2e3b;

  transform:rotate(-45deg);
  transform-origin:0 100%;
}
.heart:after{
  background:#cf2e3b;

  transform:rotate(45deg);
  transform-origin:100% 100%;
}

2.心跳动画

.heart{
  position:relative;
  height:90px;
  width:120px;
  margin:150px auto;
  
  animation:beat 1.5s ease-out;
  animation-iteration-count: infinite;
}
@keyframes beat{
  0%  { transform:scale(1);   }
  25% { transform:scale(0.9); }
  50% { transform:scale(1.1); }
  75% { transform:scale(1);   }
  100%{ transform:scale(1);   }
}

运行结果：http://output.jsbin.com/nihizox

posted @ 2017-11-06 17:32  CodingSwallow  阅读(297)  评论(0)  编辑  收藏  举报