2-4 编程练习Code review
来源:2-4 编程练习
我在浪费钱
2021-09-02 20:14:24
老师,如果需要实现多个属性的过渡效果,但又不想将transition-property定义all(因为会引发效率问题),还有别的解决方法吗?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡</title>
<style>
/*补充代码*/
div {
width: 300px;
height: 300px;
background-color: pink;
transition: all 0.5s linear 0s;
}
div:hover {
background-color: orange;
box-shadow: 5px 6px 10px rgba(0, 0, 0, .3);
transition: all 1s linear 0s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1回答
同学你好,代码正确,问题解答如下:
可以给transition设置多个属性,属性之间用逗号分隔即可:
由于现在浏览器性能很好,所以不用考虑all带来的效率问题,直接用all更简单。
祝学习愉快!