<!DOCTYPE html>
<html lang="en">
? ? <meta charset="UTF-8">
? ? <title>動畫
? ? <style type="text/css">
? ? ? ? *{
margin:0;
padding:0;
}
.big_box{
width:638px;
height:290px;
background-color:#ffffff;
}
.pic{
width:603px;
height:254px;
left:21px;
top:15px;
border:1px solid black;
position:relative;
background-color:#ffffff;
}
.box{
width:61px;
height:70px;
float:right;
margin:85px auto 0px;
border-radius:15px;
}
#f1{
background-color:#01ffff;
margin-right:33px;
animation:moving 2s ease-in-out 400ms infinite;
}
#f2{
background-color:#adff30;
margin-right:61px;
animation:moving 2s ease-in-out 300ms infinite;
}
#f3{
background-color:#ffbfcd;
margin-right:61px;
animation:moving 2s ease-in-out 200ms infinite;
}
#f4{
background-color:#008001;
margin-right:61px;
animation:moving 2s ease-in-out 100ms infinite;
}
#f5{
background-color:#fe0000;
margin-right:61px;
animation:moving 2s ease-in-out infinite;
}
.word{
margin:170px 210px 0px;
font:45px 微軟雅黑;
}
@keyframes moving{
0%{
transform:scaleY(1);
}
50%{
transform:scaleY(1.5);
}
100%{
transform:scaleY(1);
}
}
? ? <div class="big_box">
? ? ? ? <div class="pic">
? ? ? ? <div id="f1" class="box">
? ? ? ? <div id="f2" class="box">
? ? ? ? <div id="f3" class="box">
? ? ? ? <div id="f4" class="box">
? ? ? ? <div id="f5" class="box">
? ? ? ? <div class="word">loading..</div>
? ? ?</div>
? ? ?</div>
</body>
</html>
