(过度)老师好,我有几个问题

来源:2-7 编程练习

我代码么问题

2021-07-31 14:13:59

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

            transition:transform 1s linear 0s;   

           

        }

        div:hover{

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

        }

        

       

    </style>

</head>

<body>

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

</body>

</html>

问题

其中的transform属性,是必须要在一条属性内写完吗,为什么我一开始把

 div:hover{ transform:rotate(360deg) scale(2);  }写成两个属性的

div:hover{transform:rotate(360deg);    transform:scale(2);}

这样好像就不能成功运行。


写回答

1回答

好帮手慕言

2021-07-31

同学你好,代码中多了一个分号,建议去掉,如下:

http://img.mukewang.com/climg/6104f47e0928db7b06760144.jpg

另外:transform: rotate(360deg); transform: scale(2);这种写法都表示给元素设置transform属性,由于同名属性,后面的会覆盖前面的,所以最终元素只有放大效果,而没有旋转效果。

​建议:完成本编程效果,写成transform: rotate(360deg) scale(2);这种形式即可。

祝学习愉快~

0

0 学习 · 15276 问题

查看课程