为图片添加景深效果
要求
-
要求通过 JS 的方式动态为图片添加景深效果,不可以通过静态 CSS 代码的方式添加。
-
源码中共有 6 张图片,需要对包含人物和人物身后枫叶林的 img 标签设置清晰效果,对人物与枫叶林之外的 img 标签应保持模糊效果。
题解
西游记之西天取经
要求:
修改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属性是一个简写属性,用于在一个声明中设置六个动画属性。以下是这些属性的详解:
- animation-name: 规定动画的名称。这是必须的属性,用于指定要使用的关键帧名称。你可以使用关键词none来取消任何现有的动画效果。
- animation-duration: 定义动画完成一个完整周期所需的时间。默认值为0,表示没有动画效果。你可以使用s或ms作为时间单位。
- animation-timing-function: 定义动画的速度曲线。你可以使用预定义的关键字(如ease、linear、ease-in、ease-out、ease-in-out)或使用cubic-bezier函数来自定义速度曲线。
- animation-delay: 规定动画开始前的延迟时间。默认值为0,表示没有延迟。你可以使用s或ms作为时间单位。
- animation-iteration-count: 定义动画应该播放的次数。你可以使用特定的数字(如2或3)或者使用关键词infinite来无限次地播放动画。
- 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 += `
身高${height}cm,体重${weight}kg,性别${gender},会在${where}锻炼。` }