奔跑的熊大(案例)内附图片素材 |
您所在的位置：网站首页 › 奔跑动画素材 › 奔跑的熊大(案例)内附图片素材 |
奔跑的熊大(案例)内附图片素材
|
此案例使用了 steps() 步长来显示熊的状态，常规的ease等动画速度，达不到我们需要的效果，因此steps()更契合，而两张背景使用linear来匀速运动来保证速度的一致。 具体代码如下： 奔跑的熊 .bear { position: absolute; bottom: 15px; width: 200px; height: 100px; background: url(media/bear.png) no-repeat; /* 元素可以添加多个动画，用逗号分割即可 */ animation: bear 1s steps(8) infinite, move 3s linear forwards; } .bg2 { position: absolute; width: 100%; height: 500px; /* 注意这里不要写no-repeat 否则图片动画结束之后会有空白 */ background: url(media/bg2.png); animation: bg-move 25s linear infinite; } .bg1 { position: absolute; bottom: 0; width: 100%; height: 336px; /* 注意这里不要写no-repeat 否则图片动画结束之后会有空白 */ background: url(media/bg1.png); animation: bg-move 25s linear infinite; } /* 让熊动起来 */ @keyframes bear { 0% { background-position: 0 0; } 100% { background-position: -1600px 0; } } /* 熊跑到中间 */ @keyframes move { 0% { left: 0; } 100% { left: 50%; /* margin-left: -100px; */ /* 往左移动自身宽度的一半 */ transform: translateX(-50%); } } @keyframes bg-move { 0% { background-position: 0 0; } 100% { background-position: -3840px 0; } }图片素材：
至于具体效果，感兴趣的朋友们可以去试一试，也可以在此基础上加入一些自己的小创意。 |
【本文地址】