CSS3 第九章作业是关于 CSS3 动画和过渡的学习。这些动画和过渡可以为网站添加更复杂、更有趣的用户交互效果,从而提升用户体验。
在这个章节中,我们学习了如何创建过渡和动画效果,以及如何调整它们的持续时间、延迟时间和速度曲线。我们还学习了如何使用关键帧和 JavaScript 来控制动画的行为。
/* 过渡效果 */ .Box1 { background-color: red; width: 200px; height: 200px; transition: background-color 1s ease-in-out; } .Box1:hover { background-color: blue; } /* 动画效果 */ .Box2 { width: 100px; height: 100px; background-color: green; position: relative; animation: slide 2s ease-in-out infinite alternate; } @keyframes slide { from { left: 0; } to { left: 200px; } }
以上代码是本章节中的一些示例代码。我们可以看到,过渡效果和动画效果使用的 CSS 属性分别是 transition
和 animation
。在这些属性中,我们可以指定不同的过渡或动画效果,以及如何控制它们的行为。
除了这些基本的属性之外,CSS3 还提供了许多其他的属性和功能,可以让我们创建更复杂、更有趣的动画和过渡效果。在实际开发中,我们可以根据具体的情况和需求,选择适合的属性和技术来实现对应的效果。