做出的动画效果不一样

来源:2-14 编程练习

考小帅

2020-11-15 14:23:55

# 具体遇到的问题
做出的动画效果不一样
# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码,切记添加代码注释(请勿截图)

在这里

<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:transform 0.5s ease 0s;

            transition:border-radius 0.5s ease 0s;

        }

        #myTest:hover{

            /*添加代码*/

            background-color:green;

            font-size: 40px;

            transform:scale(2);

            border-radius:50%;

        }

    </style>

​输入代码,可通过选择【代码语言】突出显示

写回答

1回答

好帮手慕星星

2020-11-15

同学你好,相同属性会进行覆盖,所以在设置了两个transition属性的时候,第一个并没有生效,是突然放大的。

建议将transition属性的值修改all,也就是所有改变的样式都有过渡效果,并且字体大小不需要修改,放大之后字体看着也会变大的。参考

http://img.mukewang.com/climg/5fb0cbf809a3bc2405040338.jpg

祝学习愉快!

0

0 学习 · 15276 问题

查看课程