css动画节日快乐

下载代码

html

css

分享到微信朋友圈

html

<div>
  <h2>谢谢你的来访...</h2>
  <h5 class="no"> </h5>
</div>
<div class="monster">
  <div class="eye">
    <div class="eyesball1"> 
      <div class="eyesball2"></div>
    </div>
  </div>
  <div class="mouth">
    <div class="teeth1"></div>
    <div class="teeth2"></div>
    <div class="teeth3"></div>
    <div class="teeth4"></div>
  </div>
  <div class="ears1"></div>
  <div class="ears2"></div>
</div>
<div class="monster blue">
  <div class="eye">
    <div class="eyesball1"> 
      <div class="eyesball2"></div>
    </div>
  </div>
  <div class="mouth">
    <div class="teeth1"></div>
    <div class="teeth2"></div>
    <div class="teeth3"></div>
    <div class="teeth4"></div>
  </div>
  <div class="ears1"></div>
  <div class="ears2"> </div>
</div>
<div class="loding-page">
  <div class="monster">
    <div class="eye">
      <div class="eyesball1"> 
        <div class="eyesball2"></div>
      </div>
    </div>
    <div class="mouth">
      <div class="teeth1"></div>
      <div class="teeth2"></div>
      <div class="teeth3"></div>
      <div class="teeth4"></div>
    </div>
    <div class="ears1"></div>
    <div class="ears2"></div>
  </div>
  <div class="lodingbox">    
    <div class="loding"></div>
  </div>
</div>

css

@charset "UTF-8";
html, body {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d63e2a;
  margin: 0;
  padding: 0;
}

h2 {
  color: #fff;
  font-family: 微?正黑篦;
  padding-right: 30px;
  padding-bottom: 20px;
  margin: 0;
}

h5.no {
  margin: 0;
  padding-bottom: 10px;
  color: #cdea73;
  font-family: 微?正黑篦;
}

.container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.monster {
  position: relative;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background-color: #cdea73;
  -webkit-animation: jump 1s infinite alternate;
          animation: jump 1s infinite alternate;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  transition: 1s;
}
.monster.blue {
  background-color: #185291;
  margin-left: 10px;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.monster.blue .eye.eyesball1 {
  background-color: #cdea73;
}
.monster .ears2 {
  height: 20px;
  width: 10px;
  border-radius: 50% 0%;
  position: absolute;
  right: 20px;
  transform: translateX(-50%);
  transform: rotate(20deg);
  background-color: #eee;
}
.monster .ears1 {
  height: 20px;
  width: 10px;
  border-radius: 0% 50%;
  position: absolute;
  left: 20px;
  transform: translateX(-50%);
  transform: rotate(-20deg);
  background-color: #eee;
}
.monster .eye {
  height: 60px;
  width: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #fff;
}
.monster .eye .eyesball1 {
  height: 30px;
  width: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #185291;
  -webkit-animation: eye 1s 1s infinite alternate;
          animation: eye 1s 1s infinite alternate;
}
.monster .eye .eyesball1 .eyesball2 {
  height: 10px;
  width: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #fff;
  position: relative;
  left: 4px;
  top: -4px;
}
.monster .mouth {
  height: 20px;
  width: 50px;
  border-radius: 0% 0% 50% 50%;
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translate(-50%, -50%);
  background-color: #d63e2a;
}
.monster .mouth .teeth1 {
  height: 5px;
  width: 5px;
  background-color: #fff;
  display: inline-block;
  position: absolute;
  left: 2px;
}
.monster .mouth .teeth2 {
  height: 5px;
  width: 5px;
  background-color: #fff;
  display: inline-block;
  position: absolute;
  left: 30%;
}
.monster .mouth .teeth3 {
  height: 5px;
  width: 5px;
  background-color: #fff;
  display: inline-block;
  position: absolute;
  right: 30%;
}
.monster .mouth .teeth4 {
  height: 5px;
  width: 5px;
  background-color: #fff;
  display: inline-block;
  position: absolute;
  right: 2px;
}

@-webkit-keyframes jump {
  0% {
    top: 0;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
  }
  100% {
    top: -100px;
    box-shadow: 0 100px 80px rgba(0, 0, 0, 0.5);
  }
}

@keyframes jump {
  0% {
    top: 0;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
  }
  100% {
    top: -100px;
    box-shadow: 0 100px 80px rgba(0, 0, 0, 0.5);
  }
}
@-webkit-keyframes eye {
  0% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(10px);
  }
}
@keyframes eye {
  0% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(10px);
  }
}
.loding-page {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  flex-direction: column;
  transition: 1s;
  background-color: #185291;
}
.loding-page.complete {
  opacity: 0;
}
.loding-page.complete .monster {
  transform: scale(0.01) rotate(360deg);
}
.loding-page .lodingbox {
  height: 15px;
  width: 140px;
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 30px;
}
.loding-page .lodingbox .loding {
  height: 15px;
  width: 0%;
  background-color: #d63e2a;
}
View Sass Code

Resources

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg