2-18 作业实现情况，请老师帮忙检查
来源：2-18 编程练习
呜蜩的呀
2022-08-01 16:37:05
问题描述：
写代码过程中的一些疑问，麻烦老师帮忙解答一下
还有想问一下这节课的代码有标准答案吗？
相关代码：
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 900px;
}
div {
width: 30px;
height: 30px;
/* 这条属性是不是没有意义了？在设置poasition=fixed之后 */
margin: 0 auto;
/* 设置样式 */
font-family: Arial;
font-size: 72px;
font-weight: bold;
/* 定位到页面底部居中位置 */
position: fixed;
/* 使水平居中 */
left: 50%;
margin-left: -15px;
/*位于页面底部 */
bottom: 0;
/* 设置位于页面底部为什么也要加margin才能实现位于底部呢？ */
margin-bottom: 30px;
/* 旋转到箭头朝下 */
transform: rotate(90deg);
/* 调用动画,并且永不停止 */
animation: move 2s linear 5s infinite;
}
/* 定义动画效果 */
@keyframes move {
from {
/* 如果要对某一个属性进行设置，是要将这个属性应用到的所有属性值都再写一遍吗？不写rotate好像上面写的那个效果不生效了？ */
transform: rotate(90deg) translate(0px);
}
to {
transform: rotate(90deg) translate(30px);
}
}
</style>
</head>
<body>
<div>></div>
</body>
</html>写回答
1回答
-
好帮手慕慕子
2022-08-01
同学你好，问题解答如下：
1、是的，代码中的margin:0 auto;这句代码不起作用，可以删掉。
2、因为div大小为30px，设置为bottom后，默认在底部显示，但是里面的内容字体大小为72px，超出了div盒子，不设置margin-bottom后，超出窗口的部分被隐藏了，所以需要结合margin-bottom适当调整盒子的下外边距才能保证内容完整显示在窗口内部。
3、是的，需要将所有的属性值都再写一篇，因为totate，translate是属性值，tansform才是属性，如果不把属性值全部写一遍，后设置的tansform属性就会覆盖前面的，导致前面的不生效。
4、没有标准答案，该效果可以有多种实现方式，也可以看看问答区其他同学的实现思路，互相交流学习。
5、代码思路是可以的，但是其中有几个点可以优化，如下：
（1）练习要求的延迟时间是.5s。
（2）运动过程中内容超出窗口，部分被隐藏。
（3）适当减少动画时间，并设置动画交替运行，效果会更好。
建议修改：
祝学习愉快~
0
相似问题