css实现摇晃的杯子动画效果-html代码-BFW代码库

css实现摇晃的杯子动画效果

代码语言：html

所属分类：动画

代码描述：css实现摇晃的杯子动画效果

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


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

<style>
body {
  background: #C4FE85;
}

.wrap {
  width: 310px;
  height: 210px;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
  position: relative;
  left: 50%;
  top: 50%;
}

.cup {
  width: 200px;
  height: 130px;
  background: #FFF;
  box-shadow: inset 0px -10px 0 0 #EDDFE6;
  border-radius: 5px 5px 90px 90px;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-animation: .4s linear 0s infinite alternate cup;
          animation: .4s linear 0s infinite alternate cup;
  border: 3px solid #000;
  position: absolute;
  bottom: 0;
  left: 40px;
  z-index: 2;
}
.cup::before {
  content: '';
  width: 200px;
  background: #91ECED;
  height: 40px;
  border-radius: 100%;
  border: 3px solid #000;
  box-shadow: inset 0 20px 0 0 #fff;
  -webkit-animation: .4s linear 0s infinite alternate water;
          animation: .4s linear 0s infinite alternate water;
  position: absolute;
  top: -20px;
  left: -3px;
}
.cup::after {
  content: '';
  width: 35px;
  height: 40px;
  background: transparent;
  border-radius: 30% 100% 100% 30%;
  border: 3px solid #000;
  border-left: none;
  box-shadow: 4px 0 0 9px #fff, 6px 0 0 10px #000;
  position: absolute;
  bottom: 55px;
  right: -25px;
}
.cup__mouse {
  top: 45px;
  left: 75px;
  position: absolute;
  height: 30px;
  width: 50px;
  border: 3px solid #000;
  border-radius: 50%;
  -webkit-clip-path: polygon(50% 10%, 91% 100%, 5% 100%);
          clip-path: polygon(50% 10%, 91% 100%, 5% 100%);
}
.cup__eyes {
  width: 15px;
  height: 15px;
  background: #000;
  border-radius: 50%;
  box-shadow: 58px 0 0 0 #000;
  position: absolute;
  top: 55px;
  left: 65px;
}
.cup__label {
  width: 48px;
  height: 35px;
  box-sizing: content-box;
  padding-top: 15px;
  background: #C5C7FF;
  border: 2px solid #000;
  border-bottom: none;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-animation: .4s linear 0s infinite alternate label;
          animation: .4s linear 0s infinite alternate label;
  position: absolute;
  top: 40px;
  left: 75px;
}
.cup__label::before {
  content: '';
  width: 3px;
  height: 15px;
  background: #000;
  -webkit-animation: .4s linear 0s infinite alternate label-line;
          animation: .4s linear 0s infinite alternate label-line;
  position: absolute;
  left: 25px;
  top: -16px;
}
.cup__label::after {
  content: '';
  position: absolute;
  left: -1px;
  bottom: 0;
  width: 0;
  height: 0;
  -webkit-filter: drop-shadow(0 -2px 0 black);
          filter: drop-shadow(0 -2px 0 black);
  border-bottom: 7px solid #fff;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
}

.cup-shadow {
  width: 175px;
  height: 100px;
  background: #7CE589;
  border-radius: 40% 40% 100% 100%;
  -webkit-transform-origin:.........完整代码请登录后点击上方下载按钮下载查看