老师,辛苦检查下
来源:2-14 编程练习
Lanny_Chung
2022-03-15 21:58:58
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <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:border-radius,background-color,transform 0.5s linear 0s; } #myTest:hover{ /*添加代码*/ border-radius:50%; background-color:green; transform:scale(2); } </style> </head> <body> <div id="myTest"> duang! </div> </body> </html>
1回答
同学你好,代码中过渡效果写的不对,浏览器解析如下:
过渡时间,速度曲线以及延迟时间都是给最后一个属性transform添加的,前面两个使用默认的属性值,最后导致效果不同步。每个过渡的属性效果都要写完整,如下
或者简单一些,过渡属性写为all
祝学习愉快!
相似问题