(过度)老师好,我有几个问题
来源:2-7 编程练习
我代码么问题
2021-07-31 14:13:59
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3-1作业</title>
<style>
div{
font-size: 14px;
font-weight: bold;
line-height: 50px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 200px;
height: 50px;
margin: auto;
cursor: pointer;
text-align: center;
background: #abcdef;
transition:transform 1s linear 0s;
}
div:hover{
transform:rotate(360deg) scale(2);;
}
</style>
</head>
<body>
<div>www.imooc.com</div>
</body>
</html>
问题
其中的transform属性,是必须要在一条属性内写完吗,为什么我一开始把
div:hover{ transform:rotate(360deg) scale(2); }写成两个属性的
div:hover{transform:rotate(360deg); transform:scale(2);}
这样好像就不能成功运行。
1回答
好帮手慕言
2021-07-31
同学你好,代码中多了一个分号,建议去掉,如下:
另外:transform: rotate(360deg); transform: scale(2);这种写法都表示给元素设置transform属性,由于同名属性,后面的会覆盖前面的,所以最终元素只有放大效果,而没有旋转效果。
建议:完成本编程效果,写成transform: rotate(360deg) scale(2);这种形式即可。
祝学习愉快~