我们把播放动画的整个过程分别分为:初始状态、动画第一帧、动画最后一帧。
那么none,forwards,backwards,both分别如下:
none: 初始状态、动画第一帧、动画最后一帧、初始状态;
forwards:初始状态、动画第一帧、动画最后一帧;
backwards:动画第一帧、动画最后一帧、初始状态;
both:动画第一帧、动画最后一帧;
那么none,forwards,backwards,both分别如下:
none: 初始状态、动画第一帧、动画最后一帧、初始状态;
forwards:初始状态、动画第一帧、动画最后一帧;
backwards:动画第一帧、动画最后一帧、初始状态;
both:动画第一帧、动画最后一帧;
2017-03-17
/*任务一、设置不同列表的背景色*/
li:nth-of-type(1){
*任务二、设置缩略图形状*/
li>a::after{
/*任务三、设置缩略图背景图像*/
a[href="#bg1"]::after{
/*任务四、给缩略图添加蒙板效果*/
a[href*=#bg]::before{
/*任务五鼠标悬浮时*/
li>a:hover::after{
/*任务六、点击综略图,切换背景图*/
img.bg:target{
li:nth-of-type(1){
*任务二、设置缩略图形状*/
li>a::after{
/*任务三、设置缩略图背景图像*/
a[href="#bg1"]::after{
/*任务四、给缩略图添加蒙板效果*/
a[href*=#bg]::before{
/*任务五鼠标悬浮时*/
li>a:hover::after{
/*任务六、点击综略图,切换背景图*/
img.bg:target{
2017-03-16
ul {
border: 1px solid #ccc;
list-style: none outside none;
width: 220px;
margin: 20px auto;
padding: 0;
}
ul > li {
list-style: none outside none;
margin:0;
padding: 10px;
border-bottom: 3px solid #ccc;
}
ul > li:last-child {
border-bottom: none;
}
border: 1px solid #ccc;
list-style: none outside none;
width: 220px;
margin: 20px auto;
padding: 0;
}
ul > li {
list-style: none outside none;
margin:0;
padding: 10px;
border-bottom: 3px solid #ccc;
}
ul > li:last-child {
border-bottom: none;
}
2017-03-15
其实这个命令可以实现平时说的遮罩效果,这一节也就是相当于对空文本设置属性信息,对上面的矩形进行叠加达到现在的这种效果
2017-03-15