結構：java web項目中的WebContent目錄下建立名為“main”的檔案夾，再在檔案夾裡建立兩個子檔案夾，css（存放css檔案），img（存放圖片），至於html檔案就放在main檔案夾裡。
在html檔案中，不要忘記了在<head>...</head>中加入<link rel="stylesheet" href="main/css/test.css" type="text/css">,否則css樣式載入不出來的。
css中的整體布局沒勁寫，就講講動畫的設定
.logo{ position: absolute; width: 86%; left: 6%; height: 33%; z-index: 3; top: 50%; background: url(../img/test.png) no-repeat top center; background-size: contain; animation: bounceInUp .7s ease 0s normal both; -moz-animation: bounceInUp .7s ease 0s normal both; -webkit-animation: bounceInUp .7s ease 0s normal both; -o-animation: bounceInUp .7s ease 0s normal both;}section.active .logo{animation: bounceInUp .7s ease 0s normal both;-moz-animation: bounceInUp .7s ease 0s normal both;-webkit-animation: bounceInUp .7s ease 0s normal both;-o-animation: bounceInUp .7s ease 0s normal both;}@keyframes bounceInUp{0% {top: -30%;}40%{top: 55%;}60%{top: 30%;}80%{top: 45%;}100% {top: 50%;}}@-webkit-keyframes bounceInUp /* Safari 鍜� Chrome */{0% {top: -30%;}40%{top: 55%;}60%{top: 30%;}80%{top: 45%;}100% {top: 50%;}}@-moz-keyframes bounceInUp /* Firefox */{0% {top: -30%;}40%{top: 55%;}60%{top: 30%;}80%{top: 45%;}100% {top: 50%;}}@-o-keyframes bounceInUp /* bounceInUp */{0% {top: -30%;}40%{top: 55%;}60%{top: 30%;}80%{top: 45%;}100% {top: 50%;}}
.logo{...}包含了全部某一個圖片的相關的css樣式，
position屬性用於規定元素的定位類型，absolute值為產生絕對位置的元素;
width,height是設定圖片的寬高，在這裡需要注意，當沒有為圖片設定寬高的話，圖片自己是不會撐開元素的；
left（/right）用於指定圖片與左邊框（/右邊框）的。
z-index用於指定圖片層疊的順序，後邊的值越大，圖片就在最前面顯示（即不會被其他圖片覆蓋在上面）；
top指定圖片距離上邊框的距離；
background:url(../img/2.png);指定使用的圖片的路徑
background-repeat:屬性工作表示是否讓圖片重複，一般情況下是預設為“no-repeat”即不重複
background-size屬性設定圖片背景的大小尺寸
在.logo{...}中的最後四句就是對圖片動畫的設定，在這裡我們需要對動畫animation屬性的文法做一定的瞭解：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;其相應的作用是： 動畫(聲明) : 動畫的名稱 動畫完成時間 運動路徑 延遲時間 播放次數 是否逆向播放 動畫不播放時要用到的元素樣式 指定動畫是否正在運行或暫停 此時會有人說為什麼相同的一句文法要重複四次？因為有些瀏覽器不支援keyframes規則，所以要用相應的瀏覽器中的支援替代，所以 @keyframes bounceInUp{...} @-webkit-keyframes bounceInUp{...} @-moz-keyframes bounceInUp{...} @-o-keyframes bounceInUp{...} 這四條語句塊中的內容也是完全相同，其中的0%{}，40%{}，60%{}，80%{}，100%{}指定圖片的動畫在完成到整體動畫的百分比進度時的位置所在，因為我使用的是bounceInUp動畫，即從上往下進入，所以其中用top指定圖片的位置最後在html中調用外部css樣式語句，在<body>...</body>中添加<p class="logo"></p>即可調用動畫Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
