用CSS做简单动画——奔跑的大白熊
作者:互联网
动画
动画是 CSS3
中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果。
动画分两步:1、先定义动画;2、再调用定义好的动画
效果为:一只奔跑的大白熊从屏幕左面奔跑至屏幕中间(可直接下载源码,请从资源中免费下载)
<!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>
body {
background-color: #ccc;
}
div {
position: absolute;
/* 熊奔跑的图片分为8个,计算一个熊的宽度,设置宽与高让其只能展示一个熊 */
width: 200px;
height: 100px;
/* 距离页面底部为0,让熊在底部奔跑 */
bottom: 0;
/* 注意路径 */
background: url(bear.png) no-repeat;
/* 调用定义好的动画:动画名 时间 步长 播放的次数,动画名 时间 速度曲线 动画结束后的状态 */
animation: bear 1.2s steps(8) infinite, move 3s linear forwards;
}
/* 定义动画,白熊自己的状态 */
@keyframes bear {
/* 开始状态 */
0% {
background-position: 0 0;
}
/* 结束状态 */
100% {
background-position: -1600px 0;
}
}
/* 白熊从屏幕左面移动到屏幕中间 */
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
transform: translateX(-50%);
}
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
标签:动画,bear,奔跑,大白熊,background,position,屏幕,CSS 来源: https://blog.csdn.net/one_bird_/article/details/113923277