css 動畫

時間 2020-09-26

標籤 css 動畫欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
height: 256px;
/*
calc() 用來幫助咱們計算
*/
width: calc(1536px / 6);css

margin: 0 auto;html

/*設置背景圖片*/
background-image: url("img/bg3.png");函數

/* 指定位置*/
background-position: 0 0;動畫

/* 設置過渡*/
/* transition: background-position 500ms steps(3, start);*/url

/* 須要在執行動畫的元素上，設置動畫細節*/
/*
animation-name 指定動畫的名字
*/
animation-name: test;htm

/*
animation-duration 指定動畫持續的時間
*/
animation-duration: 400ms;圖片

/*
animation-delay 動畫的延時
*/
/*animation-delay: 3s;*/animation

/*
animation-timing-function 指定時間函數
*/
animation-timing-function: steps(5,start);it

/*
animation-iteration-count 動畫執行的次數
infinite 表示循環執行
*/
animation-iteration-count: infinite;io

}

/*.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>

</body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。