1

我现在正在学习 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 的网站？

4

1 回答 1

0

If you really want to "zoom" an element using CSS you should use a transformation and scale it to the size you want:

transform: scale(2);

This will scale the element and all of its content by a factor of 2.

Here's a fully working example:

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

Demo

Try before buy (using transform and scale)

What you tried to do, was to change the dimensions of an element. That won't actually zoom the element but make it larger. Child-elements are not affected by this. You can achieve this easier by using a transition instead of an animation:

CSS

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

Demo

Try before buy (using transition)

于 2013-09-26T08:21:18.093 回答