<!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%{
/*指定动画的结束位置*/
100%{
background-position: calc(-1536px / 6 * 5) 0;
</style>
</head>
<body>
<div class="box1"></div>
![Java小案例——随机数猜测随机数猜测[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)