Question

我现在正在学习css3但不是css3中的工人阶级任何人帮助我

<!DOCTYPE html>
<html>
<head>
    <title>Zoom Hover</title>
        <style type="text/css">

    @-moz-keyframes 'zoom' {
        0%{
            height:200px;
            width:200px;
            }
        100% {
                width: 1000px;
                height: 1000px;
            }
    }

    @-webkit-keyframes 'zoom' {
        0%{
            height:200px;
            width:200px;
            }
        100% {
                width: 1000px;
                height: 1000px;
            }
    }    

.aaa{
    width:200px;
    height:auto;

    }

.aaa:hover {
    -moz-animation-name: 'zoom' 2s;
}
.aaa:hover {
    -webkit-animation: 'zoom' 2s;
}
.aaa{
    width:200px;
    height:200px;
    -moz-transition-duration: 2s; /* firefox */
    -webkit-transition-duration: 2s; /* chrome, safari */
    -o-transition-duration: 2s; /* opera */
    -ms-transition-duration: 2s; /* ie 9 */
}
.aaa:hover {
    width: 1000px;
    height: 1000px;
}
    </style>
</head>
<body>

<div class="aaa"style="width:100px;height:100px;background:red;"></div>
</body>
</html>

有没有办法做到这一点任何人请帮助我，有没有 css3学习网站？

Answer 1

如果您真的想使用CSS“ zoom ”元素，您应该使用转换并将其缩放到您想要的大小：

transform: scale(2);

这会将元素及其所有内容缩放2倍。

这是一个完整的例子：

<强> CSS

.test {
    width: 100px;
    height: 100px;

    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;    
    -ms-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;    
    transition: all 2s ease-in-out;
}

.test:hover {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}

<强>演示

Try before buy（使用转化和比例）

您尝试做的是改变元素的尺寸。这实际上不会缩放元素但会使元素变大。子元素不受此影响。通过使用转换而不是动画，您可以更轻松地实现这一目标：

<强> CSS

.test:hover {
    width: 200px;
    height: 200px;
}

<强>演示

Try before buy（使用过渡）

如何在悬停时缩放css3中的任何类或id？

1 个答案: