webgl+canvas实现水液体涟漪动画效果代码
代码语言:html
所属分类:动画
代码描述:webgl+canvas实现水液体涟漪动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } html, body { margin: 0; min-height: 100vh; overflow: hidden; background:black; touch-action: none; } canvas { width: 100%; height: auto; object-fit: contain; } .wrapper { z-index:100; position:absolute; width:100%; height:100%; background:transparent; opacity:.3; } .wrapper .choral{ z-index:100; position:absolute; width:100%; height:100%; background-image:url(//repo.bfw.wiki/bfwrepo/images/sea/ocean.jpeg); opacity:.1; -webkit-animation: changes infinite; animation-duration:1000s; animation-delay:0s; background-size:300%; animation-direction: alternate-reverse; background-repeat: no-repeat; } @keyframes changes {0% {opacity:0;} 100% {background-image:url(//repo.bfw.wiki/bfwrepo/images/sea/ocean.jpeg);background-size:400%; } } .wrapper .fish { position:absolute; top:-5%; left:-20%; width:200%; height:300%; background-image:url(//repo.bfw.wiki/bfwrepo/images/sea/fish.jpg); opacity:0; border-radius:10%; -webkit-animation: shadows infinite; animation-duration:22s; animation-delay:0s; background-size:100%; background-repeat: no-repeat; } .wrapper .fish2 { position:absolute; top:-10%; left:-20%; width:160%; height:150%; background-image:url(//repo.bfw.wiki/bfwrepo/images/sea/fish.jpg); opacity:0; border-radius:5%; -webkit-animation: shadows infinite; animation-duration:22s; animation-delay:25s; background-size:100%; background-repeat: no-repeat; } .wrapper .fish3 { position:absolute; top:-5%; left:-20%; width:150%; height:180%; border-radius:11%; background-image:url(//repo.bfw.wiki/bfwrepo/images/sea/fish.jpg); opacity:0; -webkit-animation: shadows infinite; animation-duration:22s; animation-delay:6s; background-size:100%; background-repeat: no-repeat; } .wrapper .fish4 { position:absolute; top:-20%; left:-20%; width:200%; height:200%; background-image:url(//repo.bfw.wiki/bfwrepo/images/sea/fish.jpg); opacity:0; border-radius:8%; -webkit-animation: shadows infinite; animation-duration:22s; animation-delay:9s; background-size:100%; background-repeat: no-repeat; } .wrapper .fish5 { position:absolute; top:0%; left:-20%; width:140%; height:140%; background-image:url(//repo.bfw.wiki/bfwrepo/images/sea/fish.jpg); opacity:0; border-radius: 10%; -webkit-animation: shadows infinite; animation-duration:22s; animation-delay:12s; background-size:100%; background-repeat: no-repeat; } .wrapper .fish6 { position:absolute; top:-10%; left:-20%; width:140%; height:150%; background-image:url(//repo.bfw.wiki/bfwrepo/images/sea/fish.jpg); opacity:0; border-radius: 10%; -webkit-animation: shadows infinite; animation-duration:22s; animation-delay:15s; background-size:100%; background-repeat: no-repeat; } @keyframes shadows { 10% {opacity:.1;} 15% {opacity:.07;background-size:100%} 20% {background-size:101%} 45% {opacity:0;} 100% {opacity:0; left:10%; top:1%; background-size:110%} } .wrapper .largefish { position:absolute; top:0%; left:0%; width:100%; height:100%; background-image:url(//repo.bfw.wiki/bfwrepo/images/sea/fish.jpg); opacity:0; -webkit-animation: approaching infinite; animation-duration:40s; animation-delay:0s; background-size:200%; background-repeat: no-repeat; } .wrapper .largefish3 { position:absolute; top:0%; left:0%; width:100%; height:100%; background-image:url(//repo.bfw.wiki/bfwrepo/images/sea/fish.jpg); opacity:0; -webkit-animation: approaching infinite; animation-duration:40s; animation-delay:20s; background-size:200%; background-repeat: no-repeat; } @keyframes approaching { 50% {opacity:.2;left:0%;} 100% {opacity:0; background-size:800%;} } </style> </head> <body> <div class="wrapper"> <div class="fish"></div> <div class="fish2"></div> <div class="fish3"></div> <div class="fish4"></div> <div class="fish5"></div> <div class="fish6"></div> <div class="largefish"></div> <div class="largefish2"></div> <div c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0