css实现万圣节药水冒泡动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现万圣节一排药水冒泡动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { background: black; } body { overflow: hidden; } .shelf { width: 30em; border-bottom: 1em solid #5E3F32; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); } .shelf::after, .shelf::before { box-shadow: 0 2px 3px 0 #d97a53; content: ""; display: block; width: 1em; height: 2em; position: absolute; bottom: -3em; background: #5E3F32; } .shelf::before { left: 1em; } .shelf::after { right: 1em; } .potion { top: 15em; background: #f2f2f2; height: 5em; width: 5em; border-radius: 100% 100% 70% 70%; position: relative; } .potion::before { content: ""; display: block; border: 1px solid grey; background: #f2f2f2; position: absolute; height: 1em; width: 4em; top: -0.3em; left: 50%; margin-left: -2em; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; z-index: -1; } .liquid { box-shadow: inset 0 0px 20px darkgreen; background: limegreen; height: 3em; width: 4.2em; border-radius: 10px 10px 70% 70%; position: absolute; left: 50%; margin-left: -2.1em; bottom: 0.1em; } .bubble { z-index: 9999; animation: bubble 2s ease infinite; animation-delay: 0.2s; background: limegreen; height: 10px; width: 10px; border-radius: 100%; left: 1.3em; bottom: 2em; position: absolute; opacity: 1; } .bubble-one { animation: bubble 1.5s ease infinite; animation-delay: 0.7s; background: limegreen; height: 15px; width: 15px; border-radius: 100%; left: 1.3em; bottom: 2em; position: absolute; opacity: 1; } .potion1 { left: 8em; top: 10em; background: lightcoral; height: 5em; width: 5em; border-radius: 100% 100% 70% 70%; position: relative; } .potion1::before { content: ""; display: block; background: lightcoral; position: absolute; height: 3em; width: 2.5em; top: -2em; left: 50%; margin-left: -1.25em; z-index: -1; } .potion1::after { content: ""; display: block; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background: lightcoral; position: absolute; height: 1em; width: 3em; top: -2.5em; left: 50%; margin-left: -1.5em; z-index: -1; } .liquid1 { animation-delay: 2s; box-shadow: inset 0 0px 20px darkorange; background: brown; height: 3em; width: 4.2em; border-radius: 10px 10px 70% 70%; position: absolute; left: 50%; margin-left: -2.1em; bottom: 0.1em; } .bubble1 { z-index: 9999; animation: bubble 3s ease infinite; animation-delay: 0.2s; background: brown; height: 20px; width: 20px; border-radius: 100%; left: 1.7em; bottom: 2em; position: absolute; opacity: 1; } .bubble-two { animation: bubble 1.5s ease infinite; animation-delay: 0.7s; background: brown; height: 15px; width: 15px; border-radius: 100%; left: 1.3em; bottom: 2em; position: absolute; opacity: 1; } .bubble-three { animation: bubble 1s ease infinite; animation-delay: 1.2s; background: brown; height: 7px; width: 7px; border-radius: 100%; left: 1.3em; bottom: 4em; position: absolute; opacity: 1; } .potion3 { left: 17em; top: 0; background: lightblue; height: 10em; width: 5em; border-radius: 100% 100% 70% 70%; position: relative; } .potion3::before { content: ""; display: block; background: lightblue; position: a.........完整代码请登录后点击上方下载按钮下载查看
网友评论0