css红心绘制及动画效果-html代码-BFW代码库

css红心绘制及动画效果

代码语言：html

所属分类：表白

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  min-height: 100vh;
  background: #EEE;
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  flex: 0 0 auto;
}

#give-love {
  width: 250px;
  height: 150px;
  margin-top: 150px;
}

.hole {
  width: 100%;
  height: 100%;
  background-color: #DDD;
  border: 1px solid #EEE;
  border-radius: 50%;
  overflow: hidden;
}

.platform {
  width: 100%;
  height: 100%;
  margin: 0px;
  border-radius: 50%;
  animation: platform 7s infinite;
}
@keyframes platform {
  from, 20%, 60%, to {
    background: #EEE;
    transform: translateY(0);
  }
  40% {
    background-color: #888;
    transform: translateY(150%);
  }
}
.platform-wrap {
  width: 250px;
  height: 300px;
  margin: -302px 0 0 2px;
  border-bottom-right-radius: 125px 75px;
  border-bottom-left-radius: 125px 75px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  overflow: hidden;
  animation: platform-wrap 7s infinite;
}
@keyframes platform-wrap {
  from, 80% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.hearth {
  width: 15.........完整代码请登录后点击上方下载按钮下载查看