1-31 / 2-1 web

为图片添加景深效果

要求

1. 要求通过 JS 的方式动态为图片添加景深效果，不可以通过静态 CSS 代码的方式添加。
2. 源码中共有 6 张图片，需要对包含人物和人物身后枫叶林的 img 标签设置清晰效果，对人物与枫叶林之外的 img 标签应保持模糊效果。

题解

 <script>
      // 请在这里编写代码，根据需求，使得图片达到景深效果
      document.querySelector(".img1").style.filter="blur(0)"
      document.querySelector(".img2").style.filter="blur(0)"
    </script>

西游记之西天取经

要求：

修改css文件，使得动画无限循环起来

题解

是个填空题，直接再后面补充 **infinite **，即可实现无限循环

    /* TODO 填空 */
    animation: a1 0.8s steps(8) infinite;

• animation: 这是一个简写属性，用于在一个声明中设置六个动画属性。
• a1: 这是动画的名称。这里使用了a2作为名称，但在实际应用中，你可能会看到更具有描述性的名称，如fadeIn或slideDown等。
• 0.8s: 这是动画的持续时间，即动画完成一个完整周期所需的时间为0.8秒。
• steps(8): 这定义了动画的步数。在这里，动画被分解成8个步骤来完成。这意味着在0.8秒的时间内，动画会经历8个等分的阶段。
• infinite: 这意味着动画将无限次地重复。

所以，这段代码的意思是：为某个元素设置一个名为

a2

的动画，该动画在0.8秒内完成8个等分的步骤，并且无限次地重复这个过程。

**CSS的

animation

属性是一个简写属性，用于在一个声明中设置六个动画属性。以下是这些属性的详解：**

1. animation-name: 规定动画的名称。这是必须的属性，用于指定要使用的关键帧名称。你可以使用关键词none来取消任何现有的动画效果。
2. animation-duration: 定义动画完成一个完整周期所需的时间。默认值为0，表示没有动画效果。你可以使用s或ms作为时间单位。
3. **animation-timing-function: **定义动画的速度曲线。你可以使用预定义的关键字（如ease、linear、ease-in、ease-out、ease-in-out）或使用cubic-bezier函数来自定义速度曲线。
4. animation-delay: 规定动画开始前的延迟时间。默认值为0，表示没有延迟。你可以使用s或ms作为时间单位。
5. animation-iteration-count: 定义动画应该播放的次数。你可以使用特定的数字（如2或3）或者使用关键词infinite来无限次地播放动画。
6. **animation-direction: **定义动画的播放方向。你可以使用关键词normal、reverse、alternate或alternate-reverse来控制动画的播放方向。

下面是一个完整的示例，展示如何使用这些属性

div {  
  animation: myAnimation 2s ease-in-out infinite;  
}  
  
@keyframes myAnimation {  
  0% {background-color: red;}  
  50% {background-color: blue;}  
  100% {background-color: red;}  
}

在这个示例中，我们为

div

元素设置了一个名为

myAnimation

的动画，该动画具有2秒的持续时间、ease-in-out的速度曲线、无限次地播放，并且从红色到蓝色再到红色的颜色变化。

健身大调查

要求：

完成

js/index.js

中的 **

formSubmit

函数，用户填写表单信息后，点击蓝色提交按钮，表单项隐藏，页面显示用户提交的表单信息**（在

id

为

result

的元素显示）。信息格式如下：“身高 172cm，体重 60kg，性别男，会在健身房、公园锻炼”。 注意：检测时会模拟表单填写过程，请不要为

id

为

result

的元素赋固定值。

题解

function formSubmit() {
    // TODO：待补充代码
    document.querySelector('#quescontent').style.display='none'
    document.querySelector('#result').style.display='block'
    let height=document.querySelector("#height").value
    let weight=document.querySelector("#weight").value
    let nan=document.querySelector("#male").value
    //let nv=document.querySelector("female").value
    let park=document.querySelector("#park")
    let gym=document.querySelector("#gym")
    let outdoor=document.querySelector("#outdoor")
    let gender=''
    let where=''
    if(!nan){
      gender='男'
    }else{
      gender='女'
    }
    if(park.checked){
      where+='公园'
    }
    if(gym.checked){
      where+='健身房'
    }
    if(outdoor.checked){
      where+='户外'
    }
  
    result.innerHTML += `<br>身高${height}cm，体重${weight}kg，性别${gender}，会在${where}锻炼。`
  
  }