老师怎么实现hover之后慢慢的变大的效果啊。。
<!DOCTYPE html>
<html lang="en">
<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;
transform: rotate(0deg);
}
div:hover{
transform: rotate(360deg);
transition: transform 2s ease-in-out 1s;
font-size: 28px;
line-height: 100px;
width: 400px;
height: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div>www.imooc.com</div>
</body>
</html>我的是直接就变大了再旋转，怎么才能在旋转的途中变大啊
0
收起
正在回答
2回答
同学你好， 因为你只对 transform设置了过度效果，所以是直接变大的， 建议修改：可以给所有属性添加过渡效果
修改过后虽然可以实现效果， 但是在旋转途中变大的效果有震动的效果，动画效果不流畅
建议优化：可以使用scale(2)属性实现放大的效果， 这样既可以减少代码量的书写， 也可以实现更好的动画效果
同学可以结合示例自己下去测试一下哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
蛤小蛤
2019-06-02 16:17:51
<!DOCTYPE html>
<html lang="en">
<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;
transform: rotate(0deg);
}
div:hover {
transform: rotate(360deg) scale(2);
transition: all 2s ease-in-out 1s;
cursor: pointer;
}
</style>
</head>
<body>
<div>www.imooc.com</div>
</body>
</html>相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星