gpt4 book ai didi

html - 如何使用关键帧在CSS中平滑地缩放div

转载 作者:太空宇宙 更新时间:2023-11-03 23:14:43 25 4
gpt4 key购买 nike

我想在鼠标悬停时使用 css 将 div 从比率 0.06 平滑地缩放到 1。但我无法获得这种效果。

这是我尝试过的

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 4s;
}

div:hover {
transform:scaleX(0.06);
animation-name: example;
animation-duration: 1s;
}

@keyframes example {
25% {transform:scaleX(0.200);}
50% {transform:scaleX(0.500);}
75% {transform:scaleX(0.700);}
100% {transform:scaleX(1);}
}

</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div>jhk</div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>

我该怎么做?

最佳答案

你并没有真正指定你想如何转换所有东西所以这里是一个基本的例子:

div {
width: 100px;
height: 100px;
background: red;
transition: all ease-in 2s;
transform:scale(0.06);
}

div:hover {
transform:scale(1);
}

流畅的动画不需要关键帧。像这样简单的事情可以用简单的 CSS transforms 来完成。

工作 fiddle :http://jsfiddle.net/mh90y3xv/

关于html - 如何使用关键帧在CSS中平滑地缩放div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31043166/

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