老师，请问能否实现鼠标刚触及div时，boder-radius的值为30px,然后经过0.5S后，boder-radius的值变为50%
来源：2-14 编程练习
dy12369
2022-03-08 22:38:55
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡与动画</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 100px auto;
text-align: center;
line-height: 100px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
color: rgb(255, 255, 255);
background-color: rgb(231, 65, 65);
transition: transform 0.5s linear 0s;
}
.box:hover {
border-radius: 50%;
background-color: rgb(3, 136, 58);
transform: scale(2);
}
</style>
</head>
<body>
<div class="box">duang!</div>
</body>
</html>
1回答
-
好帮手慕然然
2022-03-09
同学你好，题目要求鼠标移入元素，在0.5秒的时间里改变形状为圆形、放大为原来大小的2倍并改变背景颜色，说明形状、大小、背景颜色都需要设置0.5s的过渡效果，同学所写的代码只给transform（大小）设置了过渡，而没有给形状和背景颜色设置过渡，建议将transform修改为all即可，如下
另外，关于同学所说的动画效果是可以实现的，需要结合后面的animate动画，或者通过JavaScript代码来控制。建议同学先继续向后学习，然后再尝试着实现。
祝学习愉快！
0
相似问题