老师，我这样可以吗，注释里有一个问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>2-9</title>
<style type="text/css">
/* * {
margin: 0;
padding: 0;
} */
.box {
font-family: Arial;
font-size: 72px;
font-weight: bold;
position: fixed;
left: 50%;
margin-left: -15px;
bottom: 20px;
transform: rotate(90deg);
/*
这个地方是写错了吗
right: 0;
left: 0; */
width: 30px;
height: 30px;
margin: auto;
animation: xiahua 1s ease 5s infinite alternate;
}
@keyframes xiahua {
from {
/* 为什么这里去掉from和to里的rotate(90deg),页面五秒后就会没有之前19行设置的箭头朝下的效果了，就还原了呢 */
transform: translateY(0) rotate(90deg);
}
to {
transform: translateY(8px) rotate(90deg);
}
}
</style>
</head>
<body>
<div class="box">></div>
</body>
</html>
正在回答
同学你好，效果图中有“顿一下”的感觉，建议可以实现一下。
另外，关于注释中的问题：
1、right: 0;和left: 0; 没有写错，给设置position定位的元素设置right: 0、left: 0以及margin:auto属性，可以实现水平居中的效果。
2、box盒子中默认设置了transform属性，如果在动画中也设置transform属性，那么当box盒子调用动画时，动画中的transform属性会覆盖box盒子中的transform属性，导致rotate旋转失效。
因此，建议使用偏移属性bottom代替transform属性实现移动效果，参考代码如下：
祝学习愉快！
-
同学你好，很抱歉之前的问题，没有通知，所以遗漏了。以后同学可以直接“回复”：
这样消息就不会被漏掉了。
老师会向技术人员询问一下该问题，得到回复后，再反馈给同学，请耐心等待一下。
祝学习愉快！
2021-08-21 16:05:31
明白了老师，老师，为什么电脑和手机的问答记录不同步呢，有的问答在电脑上看不到
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星