没有动画效果啊

没有动画效果啊

<!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

登陆购买课程后可参与讨论,去登陆

2回答
提问者 金刚小仓 2017-02-03 19:06:54

多谢啊!!

卡布琦诺 2017-02-01 17:55:19

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);

望采纳~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师