项目之网易游戏官网-合作产品部

关于第一个项目的重点知识点回顾

一、css动画之steps animation逐帧动画

• 项目源代码

/*move为动画名*/
@keyframes move {
0% {
left:0;
}
100% {
left:-34560px;
}
}

animation: move 50s steps(18,end) infinite;

• steps（）的语法结构
  steps（number,position）
  动画要分为多少段则number就填几，关键帧的个数=段数+1;
  position有两个属性，分别为：
  ①start：表示时间一开始，从第二个关键帧开始至结束。
  ②end：表示时间一开始，从第一个关键帧开始至结束。
• 适用情况
  当所处理的动画有多张图片在一行或者如下图片，则可选用steps（）属性
  
  
  
  
  

二、用css模拟单击事件

主要方法：先引用input标签里的radio单选按钮，然后用label属性将要关联的图标或文字与单选按钮进行关联(即将图标或文字外面套一个label标签)，最后在css里面用：checked¹伪类设置想要实现的效果。这些代码要写在想要添加单击后效果内容的最上面

项目实例

<input type="radio" name="pd-cp-container" id="pd-cp-cont2">
<input type="radio" name="pd-cp-container" id="pd-cp-cont3">
<label>
<div  class="iconfont icon-left2" style="position: absolute; left: 120px; top: 580px"></div>
</label>
<label>
<div  class="iconfont icon-right2" style="position: absolute; left: 120px; top: 580px"></div>
</label>
<ul>
...
</ul>

#pd-cp-cont2:checked~ul {
    transform: translateX(-1304px);
}

---

1. 该选择器匹配每个被选中的input元素，仅用于单选按钮和复选框 ↩︎