用css實現簡單動畫效果-css教學-PHP中文網

首頁

web前端

css教學

用css實現簡單動畫效果

一个新手

Oct 19, 2017 am 09:11 AM

css效果

這幾天公司需要更新一個行動端web的頁面，因為任務簡單，就交給身為菜鳥新人的我來做。第一次接觸css還是在14年剛上大一的時候跟著html一起學習的，之後就再也沒有接觸過。所以只好一邊學習，一邊完成任務(⊙﹏⊙)b

結構：java web專案中的WebContent目錄下建立名為「main」的資料夾，再在資料夾裡建立兩個子資料夾， css（存放css檔案），img（存放圖片），至於html檔案就放在main資料夾裡。

在html檔案中，不要忘記了在

...中加入,否則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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn