其他分享
首页 > 其他分享> > ＜CSS练习＞ 奔跑的小熊 CSS3动画 含素材

＜CSS练习＞ 奔跑的小熊 CSS3动画 含素材

作者：互联网

本案例用了2个动画
第一个动画是整张的素材（文章末尾） 从左往右依次划过 盒子大小为：width: 200px;height: 100px; 这里animation属性用步长steps()
第二个是第一个的动画 一直运动到浏览器的中央 animoaion-fill-mode:forwards;
因为素材是白色的 我这里设置了背景图为粉色 更方便看出效果
静态效果图：在这里插入图片描述
小熊从左边一直跑 跑到中间继续原地跑

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				position: absolute;
				width: 200px;
				height: 100px;
				background: url(素材/xiong.png) no-repeat;
				background-color: pink;
				animation: bear 1s steps(8) infinite, move 3s forwards;
			}
			@keyframes bear{
				0%{
					background-position: 0;
				}
				100%{
					background-position: -1600px 0;
				}
			}
			@keyframes move{
				from{
					left: 0;
				}
				to{
					left: 50%;
					/* margin-left: -100px; */
					transform: translateX(-50%);
				}
			}
		</style>
	</head>
	<body>
		<div class="">
			
		</div>
	</body>
</html>

素材：
在这里插入图片描述

标签：CSS3,动画,小熊,100px,素材,background,position,CSS,left
来源： https://blog.csdn.net/weixin_47816527/article/details/118104863