主页
M
html5
JavaScript
DIV+CSS
前端美工
--网页制作--
Java与JSP
PHP
Python 3
Golang
--网络编程--
Mysql
Oracle
NoSQL
SQLite
--数据库--
Linux
正则表达式
架构
--运维--
--网页特效--
--移动开发--
SDN
QUIC
网络原理
--网络--
强化学习
机器学习
--人工智能--
区块链1
区块2
--区块链--
爬虫技术
爬虫案例
--数据采集--
理论
dapp案例
--dapp--
css实现sprite与sprite动画
2020-06-23
网页编程网
网页编程网
<style> .icon{ display: block; width: 27px; height: 27px; border:1px solid red; } .icon1{ background:url('http://www.youkud.com/upfile/image/20200623/icon.png') -20px -120px; } .icon2{ background:url('http://www.youkud.com/upfile/image/20200623/icon.png') -20px -170px; } .car{ display: block; width: 107px; height: 47px; background:url('http://www.youkud.com/upfile/image/20200623/0.jpg') 0 0; } </style> </head> <body> <p>向左，向上移是负的。</p> <i class="car"></i> <i class="icon icon1"></i> <i class="icon icon2"></i> </body> <script> var i=document.getElementsByTagName('i')[0]; var x=0; var y=0; var w=643/6;//计算最小图高度 var h= 471/10;//计算最小图高度 setInterval(function(){ x=x-w; if(x<=-643){ x=0; y=y-h; } i.style.backgroundPosition = x+'px '+y+'px'; },100); </script>
阅读原文
阅读
4127
123
显示电脑版
