纯css布局实现柠檬汽水效果-html代码-BFW代码库

代码语言：html

代码描述：纯css布局实现柠檬汽水效果

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


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

<style>
* {
  padding: 0;
  margin: 0;
}
.wrapper {
  background: #009873;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.wrapper .glass {
  position: relative;
  left: 45%;
  top: 50%;
  width: 150px;
  height: 250px;
  border: 5px solid #fff;
  border-top: none;
  border-radius: 0 0 5px 5px;
  transform: perspective(10px) rotateX(-1deg);
  z-index: 1000;
  box-shadow: 10px 10px 25px 15px rgba(0, 0, 0, 0.2);
}
.wrapper .glass:after {
  content: "";
  width: 150px;
  height: 30px;
  background: transparent;
  position: absolute;
  bottom: 0;
  background: radial-gradient(100% 120% at top, transparent 50%, #fff 51%);
  z-index: 1000;
}
.wrapper .glass .liquid {
  background: rgba(115, 198, 140, 0.5);
  position: absolute;
  width: 150px;
  height: 220px;
  bottom: 0;
  overflow: hidden;
  z-index: 10;
}
.wrapper .glass .liquid2 {
  background: rgba(255, 255, 255, 0.25);
  height: 249px;
  border-top: 0.2px solid rgba(255, 255, 255, 0.4);
  width: 150px;
}
.wrapper .glass .straw {
  border: 5px solid #35231a;
  border-bottom: 0;
  border-right: 0;
  height: 200px;
  width: 50px;
  position: absolute;
  left: 83%;
  top: -10%;
  border-radius: 10px 0;
  transform: rotate(15deg);
}
.wrapper .glass .cube {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  position: absolute;
  background: rgba(181, 222, 189, 0.7);
  left: 25%;
  z-index: 100;
}
.wrapper .glass .cube1 {
  bottom: 5%;
  transform: rotate(-5deg);
}
.wrapper .glass .cube2 {
  top: 45%;
  left: 55%;
  transform: rotate(35deg);
}
.wrapper .glass .cube3 {
  top: 2%;
  width: 45px;
  height: 40px;
  transform: rotate(5deg);
  animation: floatIce 2s infinite alternate;
}
.wrapper .glass .half-lemon {
  position: absolute;
  width: 100px;
  height: 50px;
  background: #fff;
  border-radius: 100px 100px 0 0;
  border: 5px solid #fdde23;
  border-bottom: 0;
}
.wrapper .glass .half-lemon .seeds {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 40px solid #fdde23;
  border-radius: 100%;
}
.wrapper .glass .half-lemon .seed1 {
  left: 8px;
  bottom: -10px;
  transform: rotate(-70deg);
}
.wrapper .glass .half-lemon .seed2 {
  left: 25px;
  bottom: 2px;
  transform: rotate(-20deg);
}
.wrapper .glass .half-lemon .seed3 {
  left: 45px;
  bottom: 2px;
  transform: rotate(15deg);
}
.wrapper .glass .half-lemon .seed4 {
  left: 60px;
  top: 20px;
  transform: rotate(70deg);
}
.wrapper .glass .lemon1 {
  left: 45%;
  bottom: 10%;
  transform: rotate(120deg);
}
.wrapper .glass .lemon2 {
  top: 40%;
  left: -25px;
  transform: rotate(-95deg);
  animation: floatLemon 6s ease-in alternate infinite;
}
.wrapper .glass .bubble {
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.4);
  position: absolute;
  animation-delay: 1s;
}
.wrapper .glass .bubble1 {
  width: 10px;
  height: 10px;
  animation: bubbleAnimation 1s ease-in infinite, sideways 0.5s ease-in infinite alternate;
  left: 20%;
}
.wrapper .glass .bubble2 {
  width: 12px;
  height: 12px;
  left: 30%;
  animation: bubbleAnimation 1.5s ease-in infinite, sideways 0.3s ease-in infinite alternate;
}
.wrapper .glass .bubble3 {
  width: 8px;
  height: 8px;
  left: 70%;
  animation: bubbleAnimation 3.5s ease-in infinite, sideways 0.5s ease-in infinite alternate;
}
.wrapper .glass .bubble4 {
  width: 8px;
  height: 8px;
  left: 90%;
  animation: bubbleAnimation 2.5s ease-in infinite, sideways 1s ease-in infinite alternate;
}
.wrapper .glass .leaf {
  width: 40px;
  height: 80px;
  background: #59bda6;
  border-radius: 0 100% 0 100%;
  position: absolute;
  top: 12px;
  left: 6px;
  transform: rota.........完整代码请登录后点击上方下载按钮下载查看