没有动画效果啊
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <!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; transform: rotate(0deg) ; -webkit-transition:transform 4s ease-in-out 1s; -moz-transition:transform 4s ease-in-out 1s; -ms-transition:transform 4s ease-in-out 1s; -o-transition:transform 4s ease-in-out 1s; transition:transform 4s ease-in-out 1s; } div:hover{ font-size:28px; font-weight: bold; line-height: 100px; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 400px; height: 100px; margin: auto; cursor: pointer; text-align: center; background: #abcdef; transform: rotate(360deg) ; -webkit-transition:transform 4s ease-in-out 1s; -moz-transition:transform 4s ease-in-out 1s; -ms-transition:transform 4s ease-in-out 1s; -o-transition:transform 4s ease-in-out 1s; transition:transform 4s ease-in-out 1s; } </style></head><body> <div>www.imooc.com</div></body></html> |
正在回答 回答被采纳积分+1
1、去掉div｛｝里面的 transform: rotate(0deg) ;
2、这一系列代码中只需要写一个过渡时间即可：
-webkit-transition:transform 4s ease-in-out 1s;
-moz-transition:transform 4s ease-in-out 1s;
-ms-transition:transform 4s ease-in-out 1s;
-o-transition:transform 4s ease-in-out 1s;
transition:transform 4s ease-in-out 1s;
正确示例：
-moz-transition: transform 0.8s ease-in-out;
-webkit-transition: transform 0.8s ease-in-out;
-o-transition: transform 0.8s ease-in-out;
-ms-transition: transform 0.8s ease-in-out;
transition: transform 0.8s ease-in-out;
3、旋转角度也要写出浏览器兼容样式：
正确示例：
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
望采纳~
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧