看到樓下有個哥們說動畫有問題,按照他這種方式去修改動畫是回復了,我就很奇怪,看了下初始化圖片的位置css,position后,left了50%,然后左移了50%,造成了動畫一半的效果,將left改為0,并且左移的動畫刪掉,動畫就正常了,希望能夠幫到耐心看評論的朋友。。。
2018-05-10
tranform形變動畫:
rotate旋轉/skew扭曲/scale縮放/translate移動/matrix矩陣變形;
transition緩動動畫:
property 樣式、 duration完成過渡所需時間、 timing-function過渡函數、 delay延遲時間;
animation逐幀動畫:
KeyframesName幀名、
duration、timing-function、delay(同上)、
iteration-count循環次數、direction是否輪流反向播放動畫、play-state規定正在運行與否、fill-mode規定播放前或后,效果是否可見;
rotate旋轉/skew扭曲/scale縮放/translate移動/matrix矩陣變形;
transition緩動動畫:
property 樣式、 duration完成過渡所需時間、 timing-function過渡函數、 delay延遲時間;
animation逐幀動畫:
KeyframesName幀名、
duration、timing-function、delay(同上)、
iteration-count循環次數、direction是否輪流反向播放動畫、play-state規定正在運行與否、fill-mode規定播放前或后,效果是否可見;
2018-05-09
/*任務一、設置不同列表的背景色*/
.clearfix > li:nth-of-type(1)
.clearfix > li:nth-of-type(2)
...
.clearfix > li:nth-of-type(5){
.clearfix > li:nth-of-type(1)
.clearfix > li:nth-of-type(2)
...
.clearfix > li:nth-of-type(5){
2018-05-08
.wrapper > div:nth-of-type(2n-1),
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > :nth-child(4n-3),
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > div:nth-of-type(odd),
.wrapper > p:nth-of-type(even){
background: orange;
}
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > :nth-child(4n-3),
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > div:nth-of-type(odd),
.wrapper > p:nth-of-type(even){
background: orange;
}
2018-05-08
.wrapper > div:nth-of-type(2n-1),
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > :nth-child(4n-3),
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > div::nth-of-type(odd),
.wrapper > p:nth-of-type(even){
background: orange;
}
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > :nth-child(4n-3),
.wrapper > p:nth-of-type(2n){
background: orange;
}
/*或者*/
.wrapper > div::nth-of-type(odd),
.wrapper > p:nth-of-type(even){
background: orange;
}
2018-05-08
:first-child 父元素下面的第一個元素
P:first-of-type 父元素下面類型為P的第一個元素
P:first-of-type 父元素下面類型為P的第一個元素
2018-05-08
<style>
a[class^="column"]{background:red;}
a[href$="doc"]{background:green;}
a[title*="box"]{background:blue;}
</style>
a[class^="column"]{background:red;}
a[href$="doc"]{background:green;}
a[title*="box"]{background:blue;}
</style>
2018-05-08
ul li:only-child,ol li:only-child{
background:orange;
}
background:orange;
}
2018-05-07
感覺為input設置enabled后,所有的input都有了這個屬性,至于第二個框被禁用,是disabled="disabled"起作用,將
/*input[type="text"]:disabled{*/
/* box-shadow: none;*/
結果還是一樣
/*}*/
/*input[type="text"]:disabled{*/
/* box-shadow: none;*/
結果還是一樣
/*}*/
2018-05-06