<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fish Spinner</title> <style> body { background-color: #FFFCF9; overflow: hidden; display: flex; align-items: center; justify-content: center; } body, html { height: 100%; width: 100%; margin: 0; padding: 0; } #animationWindow { width: 100%; height: 100%; cursor: pointer; } </style> </head> <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.6/lottie.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/ScrubLottieTimeline.min.js"></script> <script> window.onload = function () { var select = function (s) { return document.querySelector(s); }, selectAll = function (s) { return document.querySelectorAll(s); }, path = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/", animationWindow = select('#animationWindow'), anim = lottie.loadAnimation({ container: animationWindow, renderer: 'svg', loop: true, autoplay: true, //initialSegment: [0, 1140], path: path + 'fish_spinner.json' }); } </script> <body> <div id="animationWindow"></div> <a href="https://codepen.io/chrisgannon/pen/gOzgXve">https://codepen.io/chrisgannon/pen/gOzgXve</a> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » Fish Spinner loading 喜欢 (0)or分享 (0)
