纯css布局实现会跳舞的啤酒-html代码-BFW代码库

纯css布局实现会跳舞的啤酒

代码语言：html

所属分类：动画

代码描述：纯css布局实现会跳舞的啤酒

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

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

<style>
@import url("https://fonts.googleapis.com/css?family=Cute+Font&display=swap");
html,
body {
  width: 100%;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}
*:before, *:after {
  content: "";
  position: absolute;
}

body {
  background: #123752;
  width: 100%;
  height: 100%;
  font-family: "Cute Font", cursive;
}

.beer-wrapper {
  position: absolute;
  width: 70px;
  height: 100%;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
}

.beer {
  position: absolute;
  width: 70px;
}
.beer__body {
  position: relative;
  width: 70px;
  height: 115px;
  border-radius: 4px 4px 20px 20px;
  background: #fff;
  overflow: hidden;
  z-index: 10;
  -webkit-animation: body 0.8s infinite ease-in-out;
  animation: body 0.8s infinite ease-in-out;
}
.beer__foot {
  position: absolute;
  top: 105px;
  width: 60px;
  height: 80px;
}
.beer__foot:before {
  bottom: 0px;
  width: 15px;
  height: 8px;
  background: #d91e19;
}
.beer__foot--right {
  transform-origin: top right;
  -webkit-transform-origin: top right;
  border-right: 8px solid #d91e19;
  -webkit-animation: right-foot 0.8s 0.4s infinite ease-in-out;
  animation: right-foot 0.8s 0.4s infinite ease-in-out;
  right: 20px;
}
.beer__foot--right:before {
  right: -19px;
  -webkit-animation: right-tsumasaki 0.8s 0.4s infinite ease-in-out;
  animation: right-tsumasaki 0.8s 0.4s infinite ease-in-out;
}
.beer__foot--left {
  transform-origin: top left;
  -webkit-transform-origin: top left;
  border-left: 8px solid #d91e19;
  -webkit-animation: left-foot 0.........完整代码请登录后点击上方下载按钮下载查看