transform为什么对span标签是没有效果的呢?
来源:2-18 编程练习
能量咕噜略略
2020-12-08 16:45:50
# 具体遇到的问题
transform具体是对哪些元素有效果呢,我div元素已经设置了旋转,为什么到了动画里,旋转的属性失效,又要重新设置一个默认旋转角度呢?
一共两个问题,transform是不是对行内元素无法生效(还是针对某些行内元素,包括哪些),然后就是div元素设置了旋转,到了动画里旋转效果就失效了
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>arrow跳跃</title>
<style>
div{
width:50px;
height:50px;
font:bold 45px "微软雅黑";
position:absolute;
bottom:0;
right:0;
left:0;
margin:0 auto 100px;
transform:rotate(90deg);
animation: arrow 0.5s linear 0s infinite alternate;
}
@keyframes arrow{
from{
transform:translateY(0px) rotate(90deg);
}
to{
transform:translateY(50px) rotate(90deg);
}
}
</style>
</head>
<body>
<div>></div>
</body>
</html>
在这里输入代码,可通过选择【代码语言】突出显示
1回答
好帮手慕张
2020-12-08
同学你好,问题回答如下:
1、同学说的transform属性设置不生效的问题,其实不是代码不生效,只是动画里设置同样的属性,会覆盖上边的代码,导致不生效。
2、同学可以尝试注释掉下边的动画,会发现是有效果的,如下图:
2、transform对行内元素是无效的。
祝学习愉快!
相似问题