<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 動畫</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.box {
width: 400px;
margin: 100px auto;
}
.box img{
/*4.調用動畫*/
animation: rotateFuc 4s linear 0s;
}
/*動畫的第一步*/
/*1.申明動畫序列 @keyframes 跟着的是動畫序列的名稱*/
@keyframes rotateFuc{
/*2.寫動畫的節點 from 0% to 100% 百分比是時間節點*/
from{
}
25%{
/*3.添加動畫屬性*/
transform: rotate(360deg) scale(2);
}
75%{
/*3.添加動畫屬性*/
transform: rotate(720deg) scale(0.5);
}
to{
transform: none;
}
}
</style>
</head>
<body>
<div class="box">
<img src="./images/fengche.png">
</div>
</body>
</html>
