百度页面奔跑的白熊html、css
要创建一个'奔跑的白熊'的动画,我们可以使用HTML、CSS和JavaScript。以下是一个简单的示例:
HTML:
<div class="dodo-container">
<img src="dodo.png" alt="Dodo" class="dodo">
</div>
CSS:
.dodo-container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.dodo {
width: 100px;
height: 100px;
position: relative;
animation: run 2s linear infinite;
}
@keyframes run {
0% {
left: 0;
}
100% {
left: 100%;
transform: translateX(-100%);
}
}
这段代码创建了一个名为.dodo
的动画,使得白熊在页面上奔跑。@keyframes run
定义了动画的路径,animation
属性设置了动画的时长、速度曲线和循环行为。
请确保你有一个名为dodo.png
的白熊图片放在和HTML文件同一个目录下,或者替换src
属性为你的图片路径。
评论已关闭