<!DOCTYPE html>
<html lang="en">
? ? <title>動(dòng)畫(huà)網(wǎng)頁(yè)<title>
? ? <style type="text/css">
? ? ? ? *{
???????????? margin:0;
???????????? padding: 0;
??????? }
.x{
??????? width: 638px;
??????? height: 290px;
??????? background-color: #ffffff;
}
.c{
?????????? width: 603px;
??????????? height: 254px;
??????????? left: 21px;
??????????? top: 15px;
??????????? border: 1px solid black;
??????????? position: relative;
??????????? background-color: #ffffff;
}
.A{
?????? width: 61px;
?????? height: 70px;
?????? float: right;
????? margin: 85px auto 0px;
?????? border-radius: 15px;
}
#p1{
?????????? background-color: #01ffff;
?????????? margin-right: 33px;
????????? animation: moving 2s ease-in-out 400ms infinite;
}
#p2{
???????? background-color: #adff30;
????????? margin-right: 61px;
???????? animation: moving 2s ease-in-out 300ms infinite;
}
#p3{
???????? background-color: #ffbfcd;
???????? margin-right: 61px;
??????? animation: moving 2s ease-in-out 200ms infinite;
}
#p4{
????????? background-color: #008001;
?????????? margin-right: 61px;
??????????? animation: moving 2s ease-in-out 100ms infinite;
}
#p5{
???????? background-color: #fe0000;
????????? margin-right: 61px;
????????? animation: moving 2s ease-in-out infinite;
}
.w{
??????? margin: 170px 210px 0px;
??????? font: 45px 微軟雅黑;
}
@keyframes moving{
?????????? 0%{
???? ? ? ? ? ? ? ? ? transform:scaleY(1);
}
?????????? 50%{
???????????????????? transform:scaleY(1.5);
}
??????????? 100%{
?????????????????????? transform:scaleY(1);
}
}
? ? <div class="x">
? ? ? ??? <div class="c">
? ? ? ? ? ??? <div id="p1" class="A">
? ? ? ? ? ?? <div id="p2" class="A">
? ? ? ? ? ??? <div id="p3" class="A">
? ? ? ? ? ??? <div id="p4" class="A">
? ? ? ? ? ??? <div id="p5" class="A">
? ? ? ? ? ??? <div? class="w">loading......
</html>