单个div+css实现汤勺在瓶中摇动动画效果代码-html代码-BFW代码库

单个div+css实现汤勺在瓶中摇动动画效果代码

代码语言：html

所属分类：动画

代码描述：单个div+css实现汤勺在瓶中摇动动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
  min-height: 300px;
  height: 100vh;
  position: relative;
  background-color: white;
  z-index: 1;
  overflow: hidden;
}
div::before,
div::after {
  display: block;
  content: '';
  position: absolute;
}
#mix {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(#ffdab9, #ffdab9) 0 100%/100% calc(50% - 6em), linear-gradient(white, white) calc(50% + 2.5em) calc(50% - 5em)/3em 1em, linear-gradient(white, white) calc(50% + 4.5em) calc(50% - 3.5em)/1em 4em, linear-gradient(-80deg, rgba(255,255,255,0) 4em, rgba(255,255,255,0.3) 4em, rgba(255,255,255,0.3) 4.5em, #ffdab9 4.5em) 0 calc(50% + 1em)/50% 10em, linear-gradient(79deg, rgba(255,255,255,0) 4em, #ffdab9 4em) 100% 50%/50% 12em, linear-gradient(-125deg, rgba(255,218,185,0) 3.45em, #ffdab9 3.45em) 0 calc(50% - 5em)/50% 2em;
  background-repeat: no-repeat;
}
#mix::before {
  width: 20em;
  height: 10em;
  left: 50%;
  top: 50%;
  margin-left: -15em;
  margin-top: -3.6em;
  background: radial-gradient(circle at 30% 120%, #8a2be2 25.7%, rgba(138,43,226,0) 25.9%) 0 -2.7em/4em 4em, radial-gradient(circle at 30% -20%, rgba(138,43,226,0) 21.1%, #8a2be2 21.3%) 2em 1.2em/4em 4em, linear-gradient(#8a2be2, #8a2be2) 0 100%/100% 50%;
  background-repeat: repeat-x;
  opacity: 0.6;
  z-index: -1;
  -webkit-animation: mixdrink .........完整代码请登录后点击上方下载按钮下载查看