CSS3跳動的紅心效果

antzone發表於2018-06-20
CSSS3

分享一段程式碼例項，利用css3實現了跳動的紅心效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
body {
  background: #1a1c24;
}
/* 盒子 */
#heart, #echo {
  position: fixed;
  width: 300px;
  height: 300px;
  top: 100px;
  left: 250px;
  text-align: center;
  -webkit-transform: scale(0.95);
  -moz-transform: scale(0.95);
  -ms-transform: scale(0.95);
  -o-transform: scale(0.95);
  transform: scale(0.95);
}
#heart {
  z-index: 8;
}
#echo {
  z-index: 7;
}
/* 心 初始化 */
#heart::before, #heart::after, #echo::before, #echo::after {
  content: "";
  position: absolute;
  top: 40px;
  width: 150px;
  height: 240px;
  background: #c66c75;
  border-radius: 150px 150px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
#heart::before, #echo::before {
  left: 150px;
}
#heart::after, #echo::after {
  left: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
/* 一些小樣式 */
#heart::after {
  box-shadow: inset -6px -6px 0px 6px rgba(255,255,255,0.1);
}
#heart::before {
  box-shadow: inset 6px 6px 0px 6px rgba(255,255,255,0.1);
}
#heart i::after {
  content: "螞蟻部落";
  position: absolute;
  top: 35%;
  left: 15%;
  color: rgba(255,255,255,0.8);
  font-weight: 100;
  font-size: 30px;
  text-shadow: -1px -1px 0px rgba(0,0,0,0.2);
  z-index: 10;
}
/* 心要動起來 */
@keyframes heartbeat {
  0% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.00);
  }
}

@keyframes echo {
  0% {
    opacity: 0.1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

#heart, #echo {
  animation-duration: 2000ms;
  animation-timing-function: cubic-bezier(0, 0, 0, 1.74);
  animation-delay: 500ms;
  animation-iteration-count: infinite;
  animation-play-state: running;
}
#heart, #echo {
  animation-name: heartbeat;
}
#echo {
  animation-name: echo;
}
</style>
</head>
<body>
  <div id="heart">
    <i></i>
  </div>
  <div id="echo">
  </div>
</body>
</html>

相關文章