做出的动画效果不一样
来源:2-14 编程练习
考小帅
2020-11-15 14:23:55
# 具体遇到的问题
做出的动画效果不一样
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
在这里
<style>
#myTest{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: #f43838;
margin: auto;
margin-top: 100px;
color: #FFF;
cursor: pointer;
font-size: 20px;
font-weight: bold;
/*添加代码*/
transition:transform 0.5s ease 0s;
transition:border-radius 0.5s ease 0s;
}
#myTest:hover{
/*添加代码*/
background-color:green;
font-size: 40px;
transform:scale(2);
border-radius:50%;
}
</style>
输入代码,可通过选择【代码语言】突出显示
1回答
同学你好,相同属性会进行覆盖,所以在设置了两个transition属性的时候,第一个并没有生效,是突然放大的。
建议将transition属性的值修改all,也就是所有改变的样式都有过渡效果,并且字体大小不需要修改,放大之后字体看着也会变大的。参考
祝学习愉快!
相似问题