| 动画实战 奔跑的小白熊(包含图片资源) | 您所在的位置：网站首页 › 奔跑的小人GIF素材 › 动画实战 奔跑的小白熊(包含图片资源) |
动画实战 奔跑的小白熊(包含图片资源)
|
奔跑的小白熊效果是来自于百度浏览器的作品，下面奔跑的小白熊是我的实现的效果： 想要实现相同效果可以在这里获取相应图片。 如果喜欢的话，看下面完整源码： 笨跑的小熊 body { position: relative; background-color: #ccc; background: url(../images/mountain1.png) no-repeat 0px 620px; animation: moveBody 20s linear forwards infinite; } .bear { position: absolute; height: 100px; width: 200px; margin-top: 800px; background: url(../images/bear.png) no-repeat; animation: runningBear 0.5s steps(8) infinite, moveDIV 3s linear forwards; } @keyframes moveBody { 0% { background-position: 0px 620px; } 100% { background-position: -1800px 620px; } } @keyframes moveDIV { 0% { left: 0px; } 100% { left: 50%; transform: translateX(-50%); } } @keyframes runningBear { 0% { background-position: 0px 0px; } 100% { background-position: -1600px 0px; } }注意：如果复制的话，要注意修改图片路径。 |
实现这个效果并不是使用一个动态的gif图实现的，而是通过一张图片结合动画实现的。【本文地址】
公司简介
联系我们
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |