css 实现杯子柠檬冰块吸管搅拌动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css 实现杯子柠檬冰块吸管搅拌动画效果代码

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>

<style>
html,
body,
.wrapper {
  height: 100%;
}

body {
  overflow: hidden;
  background: #E2E9ED;
}

.wrapper {
  display: grid;
  align-items: center;
  justify-content: center;
}

.cocktail {
  position: relative;
  width: 300px;
  height: 300px;
  border: 20px solid #fff;
  border-radius: 50%;
}
.cocktail:before {
  position: absolute;
  z-index: -2;
  width: 0;
  height: 0;
  content: '';
  border-top: 150px solid #cfe7f5;
  border-right: 150px solid #e2e9ed;
  border-bottom: 150px solid #cfe7f5;
  border-left: 150px solid #cfe7f5;
  border-radius: 150px;
}
.cocktail:after {
  position: absolute;
  z-index: -1;
  top: 70px;
  right: 70px;
  bottom: 70px;
  left: 70px;
  content: '';
  border-radius: 50%;
  background: #5db8b6;
}
.cocktail .liquid {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
  -webkit-transform: translatex(-15px);
          transform: translatex(-15px);
  -webkit-animation: liquid 1.5s ease-in-out infinite;
          animation: liquid 1.5s ease-in-out infinite;
  border-radius: 50%;
  background: rgba(139, 233, 193, 0.6);
}
.cocktail .straw {
  position: absolute;
  z-index: 1;
  bottom: 70px;
  left: 50%;
  width: 20px;
  height: 0;
  -webkit-transform: translatex(-50%);
          transform: translatex(-50%);
  border-top: 300px solid #ff7647;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
.cocktail .straw:before {
  position: absolute;
  top: -310px;
  right: 0;
  left: 0;
  height: 20px;
  content: '';
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  border-radius: 50%;
  background: #cd4727;
}
.cocktail .straw:after {
  position: absolute;
  top: -10px;
  right: 0;
  left: 0;
  height: 20px;
  content: '';
  border-radius: 50%;
  background: #ff7647;
}
.cocktail .straw-surface {
  position: absolute;
  z-index: 5;
  bottom: 240px;
  left: 50%;
  width: 25px;
  height: 0;
  -webkit-transform: translatex(-50%);
          transform: translatex(-50%);
  border-top: 100px solid #ff7647;
  border-right: 2px solid transparent;
  border-left: 2px solid transparent;
}
.cocktail .straw-surface:after {
  position: absolute;
  top: -10px;
  right: 0;
  left: 0;
  height: 20px;
  content: '';
  border-radius: 50%;
  background: #ff7647;
}
.cocktail .ice-cubes {
  -webkit-transform-origin: 47% 65%;
          transform-origin: 47% 65%;
  -webkit-animation: ice-cubes 8s ease-in-out infinite;
          animation: ice-cubes 8s ease-in-out infinite;
}
.cocktail .ice-cube {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: #fff;
}
.cocktail .ice-cube.ice-cube-1 {
  -webkit-transform: translate(100px, 70px) rotate(10deg);
          transform: translate(100px, 70px) rotate(10deg);
  background: #bcdbce;
}
.cocktail .ice-cube.ice-cube-2 {
  position: relative;
  z-index: 2;
  -webkit-transform: translate(160px, 100px) rotate(30deg);
          transform: translate(160px, 100px) rotate(30deg);
}
.cocktail .ice-cube.ice-cube-3 {
  -webkit-transform: translate(40px, 0) rotate(-30deg);
          transform: translate(40px, 0) rotate(-30deg);
}
.cocktail .leaves {
  -webkit-transform-origin: 46% -42%;
          transform-origin: 46% -42%;
  -webkit-animation: ice-cubes 12s ease-in-out infinite;
          animation: ice-cubes 12s ease-in-out infinite;
}
.cocktail .leave {
  width: 100px;
  height: 70px;
  border-radius: 100px 0;
  background: #19ab87;
}
.cocktail .leave:before {
  position: absolute;
  width: 1px;
  height: 115px;
  content: '';
  -webkit-transform: rotate(55deg) translate(10px, -53px);
          transform: rotate(55deg) translate(10px, -53px);
  background: #3fc295;
}
.cocktail .leave.leave-1 {
  -webkit-transform: translate(40px, -160px) rotate(-30deg);
          transform: translate(40px, -160px) rotate(-30deg);
}
.cocktail .leave.leave-2 {
  -webkit-transform: translate(160px, -180px) rotate(30deg);
          transform: translate(160px, -180px) rotate(30deg);
}
.cocktail .leave.leave-3 {
  position: relative;
  z-ind.........完整代码请登录后点击上方下载按钮下载查看