背景色pink，动画效果：红——>绿——>青——>黄——>蓝
属性 | 效果
---|---
none | pink——>红——>绿——>青——>黄——>蓝——>pink
forwards | pink——>红——>绿——>青——>黄——>蓝
backwards | 红——>绿——>青——>黄——>蓝——>pink
both | 红——>绿——>青——>黄——>蓝
属性 | 效果
---|---
none | pink——>红——>绿——>青——>黄——>蓝——>pink
forwards | pink——>红——>绿——>青——>黄——>蓝
backwards | 红——>绿——>青——>黄——>蓝——>pink
both | 红——>绿——>青——>黄——>蓝
2018-05-24
看到楼下有个哥们说动画有问题，按照他这种方式去修改动画是回复了，我就很奇怪，看了下初始化图片的位置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