闲逛Codepen时发现了一个利用Sprites图做动画效果的示例,大为所动,遂cope其图,自己实现一下。
整体思路很简单:加载大图之后,利用js不断改变background-position以实现动画效果。
ps1:只简单实现了动画效果,没有对首次加载图片的延时做处理,如果没看到动画,刷新一下页面就可以了
ps2:处理延时时采用的setTimeout,性能堪忧,待我找到更好的方式后再优化。
ps3:代码可直接复制运行。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
background-color: #38393c;
}
.string {
position: absolute;
top: 5%;
left: 50%;
transform: translateX(-50%);
display: block;
width: 275px;
height: 600px;
background: url(http://spectrafishing.com/_ui/skin/img/spectra-wire-sprite.png) no-repeat 0px 0px transpar