svg+css实现上下波动bar动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现上下波动bar动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap"); * { box-sizing: border-box; margin: auto; } body { position: relative; height: 100vh; display: flex; background: #1d1e22; overflow: hidden; perspective: 1440px; filter: url(#goo); } svg { position: absolute; } .barBox { position: relative; width: 100%; height: 100%; display: flex; animation: flip 6s linear infinite; } .barBox .bar { display: inline-block; width: 10%; height: 0%; bottom: 0; left: 0%; margin: 0; background: #3d3f48; animation: foof 2s ease-in-out infinite, anchor 4s linear infinite; } .barBox .bar:nth-of-type(1) { animation-delay: 0.1s; } .barBox .bar:nth-of-type(2) { animation-delay: 0.2s; } .barBox .bar:nth-of-type(3) { animation-delay: 0.3s; } .barBox .bar:nth-of-type(4) { animation-delay: 0.4s; } .barBox .bar:nth-of-type(5) { animation-delay: 0.5s; } .barBox .bar:nth-of-type(6) { animation-delay: 0.6s; } .barBox .bar:nth-of-type(7) { animation-delay: 0.7s; } .barBox .bar:nth-of-type(8) { animation-delay: 0.8s; } .barBox .bar:nth-of-type(9) { animation-delay: 0.9s; } .barBox .bar:nth-of-type(10) { animation-delay: 1s; } @keyframes foof { 0% { height: 0%; } 25% { height: 100%; } 50% { height: 0%; } } @keyframes anchor { 50% { margin: 0; } 51% { margi.........完整代码请登录后点击上方下载按钮下载查看
网友评论0