gpt4 book ai didi

css - 使用CSS过渡和变换的缩放效果?

转载 作者:行者123 更新时间:2023-12-01 01:26:53 27 4
gpt4 key购买 nike

我有一个尺寸为50 x 50的按钮。在悬停时,我需要用70 x 70尺寸的按钮替换此按钮。同样,过渡应该很顺利。

因此,我正在尝试使用CSS过渡和转换功能。即,在z轴上进行transform3d。

<style>

.button1{
position:absolute;
top:0px;
left:0px;
display:inline-block;
width:50px;
height:50px;
background:url(images/button.png) no-repeat;
background-position:bottom left;
/* Transition */
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.button1:hover{
width:70px;
height:70px;
background-position:top left;
-webkit-transform: translate3d(0, 0, 10px);
-moz-transform: translate3d(0, 0, 10px);
-ms-transform: translate3d(0, 0, 10px);
-o-transform: translate3d(0, 0, 10px);
}

</style>

</head>
<body>
<a href="#" class="button1"></a>
</body>


我已经尝试过将此代码用于x和y转换,并且可以正常工作。但是,它不适用于z轴。

基本上,我希望在悬停时具有平滑的缓和缩放效果。

请提出建议。

最佳答案

通过尝试同时缩放尺寸和变换,使问题变得更加复杂。

尽管大比例尺可能会在图像和文本上产生模糊,但只需应用scale变换即可实现所需的效果。

.button:hover {
/* Un-prefixed. Prefix `transform` for all target browsers. */
transform: scale(1.2);
}

关于css - 使用CSS过渡和变换的缩放效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14479162/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com