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 alte.........完整代码请登录后点击上方下载按钮下载查看