脚本宝典收集整理的这篇文章主要介绍了动画案例之奔跑的小熊,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
实现下图的功能
思路:
利用动画拖动背景图片,动画设置步长,这种情况要特别注意动画在100%的时候最后落的位置,我这个代码就是100%最后设置为right bottom没有到达预期的效果,最后设置-1600px才可以
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 100px; background:pink url(./bear.png) no-repeat left bottom; animation: bear 1s steps(8) infinite, center 2s linear forwards; } @keyframes bear { 0% { } 100% { /* 移动到最右边 结合步长来使用,尽量用px或者绝对定位的百分比来做,不然会出现问题, 我用right bottom就不行 */ background-position: -1600px bottom; } } @keyframes center { 0% { } 100% { margin-left: 40%; } } </style> </head> <body> <div></div> </body> </html>
以上是脚本宝典为你收集整理的动画案例之奔跑的小熊全部内容,希望文章能够帮你解决动画案例之奔跑的小熊所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。