纯css-可爱的杯子

下载代码

html

css

分享到微信朋友圈

html

css

body {
  background: #C4FE85;
}

.wrap {
  width: 310px;
  height: 210px;
  -webkit-transform: translate(-50%, 50%);
          transform: translate(-50%, 50%);
  position: relative;
  left: 50%;
  top: 20%;
}

.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 alternate water;
          animation: .4s linear 0s infinite alternate water;
  position: absolute;
  top: -20px;
  left: -3px;
}
.cup::after {
  content: '';
  width: 35px;
  height: 40px;
  background: transparent;
  border-radius: 30% 100% 100% 30%;
  border: 3px solid #000;
  border-left: none;
  box-shadow: 4px 0 0 9px #fff, 6px 0 0 10px #000;
  position: absolute;
  bottom: 55px;
  right: -25px;
}
.cup__mouse {
  top: 45px;
  left: 75px;
  position: absolute;
  height: 30px;
  width: 50px;
  border: 3px solid #000;
  border-radius: 50%;
  -webkit-clip-path: polygon(50% 10%, 91% 100%, 5% 100%);
          clip-path: polygon(50% 10%, 91% 100%, 5% 100%);
}
.cup__eyes {
  width: 15px;
  height: 15px;
  background: #000;
  border-radius: 50%;
  box-shadow: 58px 0 0 0 #000;
  position: absolute;
  top: 55px;
  left: 65px;
}
.cup__label {
  width: 48px;
  height: 35px;
  box-sizing: content-box;
  padding-top: 15px;
  background: #C5C7FF;
  border: 2px solid #000;
  border-bottom: none;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-animation: .4s linear 0s infinite alternate label;
          animation: .4s linear 0s infinite alternate label;
  position: absolute;
  top: 40px;
  left: 75px;
}
.cup__label::before {
  content: '';
  width: 3px;
  height: 15px;
  background: #000;
  -webkit-animation: .4s linear 0s infinite alternate label-line;
          animation: .4s linear 0s infinite alternate label-line;
  position: absolute;
  left: 25px;
  top: -16px;
}
.cup__label::after {
  content: '';
  position: absolute;
  left: -1px;
  bottom: 0;
  width: 0;
  height: 0;
  -webkit-filter: drop-shadow(0 -2px 0 black);
          filter: drop-shadow(0 -2px 0 black);
  border-bottom: 7px solid #fff;
  border-left: 26px solid transparent;
  border-right: 26px solid transparent;
}

.cup-shadow {
  width: 175px;
  height: 100px;
  background: #7CE589;
  border-radius: 40% 40% 100% 100%;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-animation: .4s linear 0s infinite alternate shadow;
          animation: .4s linear 0s infinite alternate shadow;
  position: absolute;
  bottom: -20px;
  left: 55px;
  z-index: 1;
}
.cup-shadow::after {
  content: '';
  width: 20px;
  height: 25px;
  background: transparent;
  border-radius: 30% 100% 100% 30%;
  border-left: none;
  box-shadow: 5px 0 0 5px #7CE589;
  position: absolute;
  bottom: 35px;
  right: -10px;
}

@-webkit-keyframes cup {
  0% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
    box-shadow: inset -10px -10px 0 0 #EDDFE6;
  }
  100% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
    box-shadow: inset 10px -10px 0 0 #EDDFE6;
  }
}

@keyframes cup {
  0% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
    box-shadow: inset -10px -10px 0 0 #EDDFE6;
  }
  100% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
    box-shadow: inset 10px -10px 0 0 #EDDFE6;
  }
}
@-webkit-keyframes water {
  0% {
    box-shadow: inset 30px 20px 0 0 #fff;
  }
  100% {
    box-shadow: inset -30px 20px 0 0 #fff;
  }
}
@keyframes water {
  0% {
    box-shadow: inset 30px 20px 0 0 #fff;
  }
  100% {
    box-shadow: inset -30px 20px 0 0 #fff;
  }
}
@-webkit-keyframes label {
  0% {
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg);
  }
  100% {
    -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
  }
}
@keyframes label {
  0% {
    -webkit-transform: rotate(40deg);
            transform: rotate(40deg);
  }
  100% {
    -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
  }
}
@-webkit-keyframes label-line {
  0% {
    height: 15px;
    top: -16px;
  }
  25% {
    height: 22px;
    top: -22px;
  }
  50% {
    height: 15px;
    top: -16px;
  }
  100% {
    height: 22px;
    top: -22px;
  }
}
@keyframes label-line {
  0% {
    height: 15px;
    top: -16px;
  }
  25% {
    height: 22px;
    top: -22px;
  }
  50% {
    height: 15px;
    top: -16px;
  }
  100% {
    height: 22px;
    top: -22px;
  }
}
@-webkit-keyframes shadow {
  0% {
    -webkit-transform: skewX(-10deg);
            transform: skewX(-10deg);
  }
  100% {
    -webkit-transform: skewX(20deg);
            transform: skewX(20deg);
  }
}
@keyframes shadow {
  0% {
    -webkit-transform: skewX(-10deg);
            transform: skewX(-10deg);
  }
  100% {
    -webkit-transform: skewX(20deg);
            transform: skewX(20deg);
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg