1發(fā)現(xiàn)差別

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

.music-play {

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

??? animation: musicPlay infinite 2s linear;

}。

2、設(shè)置musicPlay的動(dòng)畫。

@-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.調(diào)用動(dòng)畫效果。

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

那么div就有music-play所以設(shè)置的動(dòng)畫效果了。

?

總結(jié)

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

給各個(gè)部分取一個(gè)好名字一個(gè)重點(diǎn)。

減少重復(fù)代碼減少代碼量。

動(dòng)畫效果要多練習(xí)多看。

轉(zhuǎn)載于:https://www.cnblogs.com/lzsxi/p/4451272.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。