老师,怎么效果实现不了呢

老师,怎么效果实现不了呢

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

            transition:transform 2s ease-in-out .5;

            }

            div:hover{ 

                transform: rotate(360deg) scale(2);

                transition:transform 2s ease-in-out .5;

            }

        

       

    </style>

</head>

<body>

    <div>www.imooc.com</div>

</body>

</html>


正在回答 回答被采纳积分+1

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

2回答
好帮手慕星星 2020-03-07 19:46:49

同学你好,过渡添加到div中就好,因为移入div的时候,transform发生了改变,所以无论移入移出都会有过渡效果。

如果只添加在hover中,只有移入的时候有过渡效果。

祝学习愉快!

好帮手慕星星 2020-03-07 17:05:34

同学你好,时间后面记得加秒数,否则会解析错误,如下修改:

http://img1.sycdn.imooc.com//climg/5e6363bb09ff538909960572.jpg

hover中可以不添加过渡。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 提问者 郭永青 #1
    老师,针对您所说的hover里面不用添加过渡,我尝试注释掉之后看效果确实可行,不过我有点不明便就是,这个过渡应该添加到哪里?如果不在hover里面添加,那么鼠标移动到div时,如何才能有过渡的效果呢
    2020-03-07 17:11:12
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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