用css實現簡單動畫效果
- 一个新手原創
- 2017-10-19 09:11:113479瀏覽
這幾天公司需要更新一個行動端web的頁面，因為任務簡單，就交給身為菜鳥新人的我來做。第一次接觸css還是在14年剛上大一的時候跟著html一起學習的，之後就再也沒有接觸過。所以只好一邊學習，一邊完成任務(⊙﹏⊙)b
結構：java web專案中的WebContent目錄下建立名為「main」的資料夾，再在資料夾裡建立兩個子資料夾， css（存放css檔案），img（存放圖片），至於html檔案就放在main資料夾裡。 
在html檔案中，不要忘記了在93f0f5c25f18dab9d176bd4f6de5d30e...9c3bca370b5104690d9ef395f2c5f8d1中加入5945c3b4e15d5145ffe59c2fcdea395a,否則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>即可调用动画
以上是用css實現簡單動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！