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

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

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