如何在悬停状态下缩放css3中的任何类或id？_Css

如何在悬停状态下缩放css3中的任何类或id？

css

如何在悬停状态下缩放css3中的任何类或id？,css,Css,我现在在学习css3，但不是css3的工人阶级，有人帮我吗 <!DOCTYPE html> <html> <head> <title>Zoom Hover</title> <style type="text/css"> @-moz-keyframes 'zoom' { 0%{ height:200px; width:200px;

我现在在学习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>


缩放悬停
@-moz关键帧“缩放”{
0%{
高度：200px；
宽度：200px；
}
100% {
宽度：1000px；
高度：1000px；
}
}
@-webkit关键帧“缩放”{
0%{
高度：200px；
宽度：200px；
}
100% {
宽度：1000px；
高度：1000px；
}
}    
.aaa{
宽度：200px；
高度：自动；
}
.aaa:悬停{
-moz动画名称：“zoom”2s；
}
.aaa:悬停{
-webkit动画：“zoom”2s；
}
.aaa{
宽度：200px；
高度：200px；
-moz转换持续时间：2s；/*firefox*/
-webkit转换持续时间：2s；/*chrome，safari*/
-o-过渡-持续时间：2s；/*opera*/
-毫秒转换持续时间：2s；/*即9*/
}
.aaa:悬停{
宽度：1000px；
高度：1000px；
}

有什么办法吗请大家帮我，有什么办法吗 css3学习网站？

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

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

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

演示

（使用变换和缩放）

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

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

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

演示

（使用转换）