企业形象设计课程标准_百度新闻_合肥百度关键词推广_嘉兴seo外包

目标要求：

请完善 css/style.css 文件（请勿修改文件夹中已给出的代码，以免造成判题无法通过）。

规定：

代码：

// index.html  不做任何修改和添加<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>展开你的扇子</title><link rel="stylesheet" href="./css/style.css" /></head><body><div id="box"><!--元素 1--><div id="item1">1</div><!--元素 2--><div id="item2">2</div><!--元素 3--><div id="item3">3</div><!--元素 4--><div id="item4">4</div><!--元素 5--><div id="item5">5</div><!--元素 6--><div id="item6">6</div><!--元素 7--><div id="item7">7</div><!--元素 8--><div id="item8">8</div><!--元素 9--><div id="item9">9</div><!--元素 10--><div id="item10">10</div><!--元素 11--><div id="item11">11</div><!--元素 12--><div id="item12">12</div></div></body>
</html>

// style.css  在后面添加代码，其余不做修改和添加#box {width: 300px;height: 440px;margin: 100px auto;position: relative;
}#item1,
#item12 {background-color: #90e0ef;
}
#item2,
#item8 {background-color: #8bdb81;
}
#item3,
#item10 {background-color: yellowgreen;
}
#item4,
#item6 {background-color: skyblue;
}
#item5,
#item9 {background-color: #d9d7f1;
}
#item7,
#item11 {background-color: #fed1f1;
}
#box div {width: 100%;height: 400px;transition: all 1.5s;position: absolute;left: 0;top: 0;/*旋转时，以盒子底部的中心为坐标原点*/transform-origin: center bottom;box-shadow: 0 0 3px 0 #666;
}
/*TODO：请补充 CSS 代码*/
/* 左侧扇子 */
#box:hover #item6{transform: rotate(-10deg);
}
#box:hover #item5{transform: rotate(-20deg);
}
#box:hover #item4{transform: rotate(-30deg);
}
#box:hover #item3{transform: rotate(-40deg);
}
#box:hover #item2{transform: rotate(-50deg);
}
#box:hover #item1{transform: rotate(-60deg);
}
/* 右侧扇子 */
#box:hover #item7{transform: rotate(10deg);
}
#box:hover #item8{transform: rotate(20deg);
}
#box:hover #item9{transform: rotate(30deg);
}
#box:hover #item10{transform: rotate(40deg);
}
#box:hover #item11{transform: rotate(50deg);
}
#box:hover #item12{transform: rotate(60deg);
}

知识补充：

1.transition

transition: [property] [duration] [timing-function] [delay];
// 1.property（属性）
// 定义要应用过渡效果的 CSS 属性。可以使用关键字 all（适用于所有属性）或具体的属性名称，
// opacity、transform、background-color 等// 2.duration（持续时间）
// 定义过渡效果的持续时间，单位为秒（s）或毫秒（ms）。例如：1s、500ms// 3.timing-function（时间函数）
// ease：默认值，慢慢开始和结束，速度在中间加快。
// linear：均匀过渡，速度不变。
// ease-in：逐渐加速。
// ease-out：逐渐减速。
// ease-in-out：开始和结束时慢，中间加快。// 4.delay（延迟）
// 定义过渡效果开始前的延迟时间，单位同样为秒（s）或毫秒（ms）。例如：0.5s。

transition:all 1.5s：

在实例中，这行代码为div元素上的所有可动画属性（如宽度、高度、位置、颜色等）设置了过渡效果，过渡时间为1.5秒。这意味着当这些属性发生变化时，变化不会立即发生，而是会在1.5秒内逐渐完成，创造出一种平滑的动画效果。