css布局实现咖啡动画效果-html代码-BFW代码库

css布局实现咖啡动画效果

代码语言：html

代码描述：css布局实现咖啡动画效果

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

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

<style>
body {
  background: #4e342e;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  overflow: hidden;
}

#plate {
  width: 50vmin;
  height: 50vmin;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  position: relative;
  box-shadow: -2vmin 2vmin 5vmin 2vmin rgba(0, 0, 0, 0.2), inset 0 0 0 0.2vmin #cccccc, inset 0 0 0 0.5vmin #fafafa, inset 0 0 10vmin 0.1vmin rgba(0, 0, 0, 0.2);
}

#handle {
  width: 10%;
  height: 30%;
  background-color: #fff;
  position: absolute;
  left: 71%;
  transform: rotate(-43deg);
  top: 65%;
  border-radius: 1vmin;
  box-shadow: -2vmin -1vmin 2vmin 0vmin rgba(37, 37, 37, 0.1), 0vmin 0vmin 0vmin 0.1vmin rgba(102, 102, 102, 0.1), inset -1vmin 0 2vmin 0.1vmin #ffffff, inset 0 0 0.5vmin 0.5vmin #bbbbbb, inset 0 0 10vmin 0.1vmin rgba(195, 195, 195, 0.2);
}

#cup {
  width: 65%;
  height: 65%;
  border-radius: 50%;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: -2vmin 2vmin 5vmin -2vmin rgba(0, 0, 0, 0.5), inset 0 0 0.5vmin 0.2vmin #cccccc, inset 0 0 0 1vmin #fafafa;
  z-index: 1;
}

#coffeBg {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #35210d 0%, #231105 100%);
  overflow: hidden;
}

#cupInner {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 0.3vmin 0 #000, 0 0 0.5vmin 2.5vmin #dedede, inset 0 0 0.4vmin 0.1vmin rgba(0, 0, 0, 0.5);
  background-color: transparent;
  z-index: 1;
}

#foamWrapper {
  filter: url("#goo") drop-shadow(0px 0px 3px #b37a3c);
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.foam {
  background-color: #f8c99d;
  width: 10%;
  height: 40%;
  border-radius: 50%;
  position: absolute;
  left: -3%;
  transform: rotate(21deg);
  top: 22%;
  filter: url("#scatter");
  box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
}

#foam2 {
  top: -7%;
  left: 14%;
  transform: rotate(53deg);
  width: 6%;
}

#foam3 {
  top: -21%;
  left: 43%;
  transform: rotate(75deg);
}

#foam4 {
  top: -20%;
  left: 46%;
  transform: rotate(105deg);
}

#foam5 {
  top: -9%;
  left: 70%;
  transform: rotate(122deg);
  height: 30%;
}

#foam6 {
  top: 8%;
  left: 98%;
  transform: rotate(152deg);
  height: 60%;
  width: 5%;
}

#foam7 {
  top: 20%;
  left: 97%;
  transform: rotate(181deg);
  height: 60%;
  width: 5%;
}

#foam8 {
  top: 51%;
  left: 96%;
  transform: rotate(211deg);
  height: 40%;
  width: 5%;
}

#foam9 {
  top: 62%;
  left: 70%;
  transform: rotate(224deg);
  height: 80%;
  w.........完整代码请登录后点击上方下载按钮下载查看