1發現差別

使用過多了DIV。 有許多沒必要的重復代碼。 有許多高度（height）沒必要設置大少。 自適應使用的方法。 切圖切的不好，PS的使用有待加強。 下載按鈕不同。 沒有完成動畫效果。 2.學到 要靈活使用背景定位：background-position。 背景大小：background-size。 Contain 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。 利用好padding 設置背景色。 用@media screen and實現頁面自適應。 注意繼承性，減少重復代碼。 box-shadow設置邊框陰影 動畫與元素綁定： animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; animation 屬性是一個簡寫屬性，用于設置六個動畫屬性： animation-name? 規定需要綁定到選擇器的 keyframe 名稱。 animation-duration? 規定完成動畫所花費的時間，以秒或毫秒計。 animation-timing-function? 規定動畫的速度曲線。 animation-delay? 規定在動畫開始之前的延遲。 animation-iteration-count? 規定動畫應該播放的次數。infinite 無限次播放 animation-direction? 規定是否應該輪流反向播放動畫。 注釋：請始終規定 animation-duration 屬性，否則時長為 0，就不會播放動畫了 Transform屬性 translate(x,y)? 定義 2D 轉換。translate3d(x,y,z)? 定義 3D 轉換。? translateX(x)? 定義轉換，只是用 X 軸的值。? translateY(y)? 定義轉換，只是用 Y 軸的值。? translateZ(z)? 定義 3D 轉換，只是用 Z 軸的值。? scale(x,y)? 定義 2D 縮放轉換。? scale3d(x,y,z)? 定義 3D 縮放轉換。? scaleX(x)? 通過設置 X 軸的值來定義縮放轉換。? scaleY(y)? 通過設置 Y 軸的值來定義縮放轉換。? scaleZ(z)? 通過設置 Z 軸的值來定義 3D 縮放轉換。? rotate(angle)? 定義 2D 旋轉，在參數中規定角度。? rotate3d(x,y,z,angle)? 定義 3D 旋轉。? rotateX(angle)? 定義沿著 X 軸的 3D 旋轉。? rotateY(angle)? 定義沿著 Y 軸的 3D 旋轉。? rotateZ(angle)? 定義沿著 Z 軸的 3D 旋轉。? skew(x-angle,y-angle)? 定義沿著 X 和 Y 軸的 2D 傾斜轉換。? skewX(angle)? 定義沿著 X 軸的 2D 傾斜轉換。? skewY(angle)? 定義沿著 Y 軸的 2D 傾斜轉換。? perspective(n)? 為 3D 轉換元素定義透視視圖。 使用動畫效果 1、設置一了類名 music-play 綁定musicPlay 設置持續時間2秒。

.music-play {

??? -webkit-animation: musicPlay infinite 2s linear;

??? animation: musicPlay infinite 2s linear;

}。

2、設置musicPlay的動畫。

@-webkit-keyframes musicPlay {

??? 0%{opacity: 0; -webkit-transform: scale(0.7) rotate(30deg) translate(0);}

??? 15%{ -webkit-transform: scale(0.8) rotate(0deg) translate(-0.2rem,-0.2rem);}

??? 30%{ opacity: 0.8; -webkit-transform: scale(0.9) rotate(-30deg) translate(-0.1rem, -0.4rem);}

? ? 50%{ -webkit-transform: rotate(0deg) translate(-0.4rem, -0.6rem);}

? ? 75%{? opacity: 0.2; -webkit-transform: rotate(30deg) translate(-0.9rem, -0.7rem);}

? ? 100%{ opacity: 0; -webkit-transform: rotate(0deg) translate(-0.6rem, -1.1rem);}

}

@keyframes musicPlay {

? ? 0%{opacity: 0; transform: scale(0.7)? rotate(30deg) translate(0);}

? ? 15%{ transform: scale(0.8) rotate(0deg) translate(-0.2rem,-0.2rem);}

? ? 30%{ opacity: 0.8; transform: scale(0.9) rotate(-30deg) translate(-0.1rem, -0.4rem);}

? ? 50%{ transform: rotate(0deg) translate(-0.4rem, -0.6rem);}

? ? 75%{ opacity: 0.2; transform: rotate(30deg) translate(-0.9rem, -0.7rem);}

? ? 100%{ opacity: 0; transform: rotate(0deg) translate(-0.6rem, -1.1rem);}

}

3.調用動畫效果。

???? <div calss=“music-play”><div>;

那么div就有music-play所以設置的動畫效果了。

?

總結

可以看到自己還有很多的不足，對于代碼的不屬性，PS軟件使用的不熟悉。使工作效率很低。

給各個部分取一個好名字一個重點。

減少重復代碼減少代碼量。

動畫效果要多練習多看。

轉載于:https://www.cnblogs.com/lzsxi/p/4451272.html

總結

以上是生活随笔為你收集整理的2015-4-20 BAV推广页面修改前后对比-安全网购的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。