<!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=)