css实现彩色透明瓶子装液体摇动动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现彩色透明瓶子装液体摇动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *{ margin:0; padding:0; box-sizing: border-box; } section{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #121212; } .bowl{ position: relative; width:300px; height: 300px; background: rgba(255,255,255,0.1); border-radius: 50%; border: 8px solid transparent; animation: animate 5s linear infinite; transform-origin: bottom center; animation-play-state: run; } @keyframes animate{ 0%{ transform: rotate(0deg); } 25%{ transform: rotate(22deg); } 50%{ transform: rotate(0deg); } 75%{ transform: rotate(-22deg); } 100%{ filter: hue-rotate(360deg); } } .bowl::before{ content: ''; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 40%; height: 30px; border: 15px solid #444; border-radius: 50%; box-shadow: 0 10px #222; } .bowl::after{ content: ''; position: absolute; top: 35%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; width: 150px; height: 60px; background: rgba(255,255,255,0.05); transform-origin: center ; animation: animateBowlShadow 5s linear infinite; animation-play-state: running; } @keyframes animateBowlShadow{ 0%{ left:50%; width:150px; height:60px; } 25%{ left:55%; width: 140px; height: 65px; } 50%{ left:50%; width: 150px; height: 60px; } 75%{ left:45%; width: 140px; height: 65px; } 100%{ } } .liquid{ position: absolute; top: 50%; left: 5px; right: 5px; b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0