css 动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
height: 256px;
/*
calc() 用来帮助我们计算
*/
width: calc(1536px / 6);
margin: 0 auto;
/*设置背景图片*/
background-image: url("img/bg3.png");
/* 指定位置*/
background-position: 0 0;
/* 设置过渡*/
/* transition: background-position 500ms steps(3, start);*/
/* 需要在执行动画的元素上，设置动画细节*/
/*
animation-name 指定动画的名字
*/
animation-name: test;
/*
animation-duration 指定动画持续的时间
*/
animation-duration: 400ms;
/*
animation-delay 动画的延时
*/
/*animation-delay: 3s;*/
/*
animation-timing-function 指定时间函数
*/
animation-timing-function: steps(5,start);
/*
animation-iteration-count 动画执行的次数
infinite 表示循环执行
*/
animation-iteration-count: infinite;
}
/*.box1:hover{*/
/* background-position: calc(-528px / 4 * 3) 0;*/
/*}*/
/*
动画
- 通过动画可以实现一些更加复杂的交互效果
- 要实现css动画，必须要线设置关键帧
- @keyframes 用来设置关键帧
@keyframes 名字 {
}
*/
@keyframes test {
/*指定动画的开始位置*/
0%{
background-position: 0 0;
}
/*指定动画的结束位置*/
100%{
background-position: calc(-1536px / 6 * 5) 0;
}
}
</style>
</head>
<body>
<div class="box1"></div>
<!--<div class="box2"></div>-->
<!--<div class="box3"></div>-->
<!--<div class="box4"></div>-->
<!--<div class="box5"></div>-->
</body>
</html>
浙公网安备 33010602011771号