悬停缩放带过渡 | CSS-Tricks

Glenn N.

# 2010 年 5 月 12 日

我能够通过 -moz-transition: scale(1.4); 在 Firefox 中实现放大，但动画部分不起作用。Firefox 有等效于 ease-in-out 的东西吗？

Alhadis

评论永久链接# 2010 年 5 月 29 日

目前，Firefox 的当前稳定版本不支持过渡，不支持。

但是 Firefox 的夜间构建版 (3.7) 应该支持过渡，在供应商前缀 "-moz-transition:" 下。由于 3.7 尚未成为稳定版本，因此我们只能等待。=)

CSS3 过渡规范可能在 Firefox 3.7 发布到公众时才最终确定，因此可能根本不需要使用特定于供应商的前缀。
Akhil

评论永久链接# 2015 年 1 月 8 日

真的很酷… 谢谢
Amee

评论永久链接# 2015 年 3 月 10 日

是的，它确实有效。
简单的代码
以及简单的缩放。

非常感谢
Bùi Quang Trung

评论永久链接# 2022 年 8 月 2 日

感谢你，我的圣人

Richard Nash

# 2010 年 12 月 2 日

我有一个关于这个技术的问题。

我试图为我的导航 ul 使用相同的东西，但问题是当我悬停时，当前链接缩放，它会覆盖其他链接，而且它不会平滑地返回到开头；它会跳跃。我不知道如何让其他导航元素移动或被当前正在缩放的导航链接推开，或者如何修复链接在我从它身上移开鼠标时跳跃的问题。我刚开始接触网页设计（6 个月），所以我的知识现在就像瑞士奶酪一样。我很感激一些关于这个问题的帮助，因为我现在有点迷茫。

这是我的 ul 的 css。我肯定错过了很多明显的东西，所以任何帮助都会非常感谢！

#intro-container ul {
font-size: 20px;
float: right;
margin: 20px 0;
padding: 80px 0 0 0;
text-align: right;
list-style: none;
}

#intro-container ul li {
}

#intro-container ul li a {
display: block;
font-size:45px;
padding: 5px;
-webkit-transition: -webkit-transform 0.5s ease;
-moz-transition: -moz-transform 0.5s ease;
transition: transform 0.5s ease;
}

#intro-container ul li a:hover {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
transform: scale(1.25);
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right;
}

再次感谢您愿意提供的任何帮助。对于新手来说，这些东西很让人困惑！

Richard Nash,
洛杉矶

Hernan Chiosso

评论永久链接# 2011 年 6 月 26 日

你试图缩放文本吗？也许你应该只改变 font-size 属性的过渡。

Swagato Bhatta

# 2012 年 8 月 31 日

您好,

我正在尝试使用这种方法缩放小图标。它适用于 moz、firefox、chrome、safari... 但是无法在 ie7-8 中运行。我认为没有直接支持。你有没有类似的 javascript 或其他类似的东西来做类似的工作？

Hugo Giraudel

# 2012 年 11 月 8 日

要打补丁。它现在在所有主要浏览器中都完美运行。:)

Daniel Jones

# 2013 年 9 月 6 日

真的很喜欢这个 Chris。看起来很棒，干杯！

Alisher

# 2013 年 11 月 21 日

使用图像的不错技巧 - 谢谢你们（新手）

Eli

# 2013 年 12 月 5 日

我被平滑缩放困扰了 2 个小时 - 然后在这里找到了这个简短而甜蜜的解决方案。非常感谢！

jordi

# 2014 年 4 月 25 日

您好,
不错的效果，我正在网站中将其用作主要悬停效果，之前也用过，但我无法解决一个问题。在过渡运行的同时，视图中的其他元素也开始进行一些轻微但非常令人讨厌的非预期移动。有时是其他图像，有时是文本变得稍微更粗，并且总是运行过渡的图像有一个开始和一个结束模糊时刻，非常短但非常可怕。我这里到底漏掉了什么？

Kenny

评论永久链接# 2015 年 5 月 7 日

嗨，我遇到了完全相同的问题，页面上的其他元素稍微移动和抖动，或者任何东西。缩放时也会出现模糊淡入问题。你有没有找到解决这个问题的办法？谢谢。

dhaval

# 2014 年 6 月 25 日

“-webkit-transition: .6s ease-in-out fade ” 这段代码在 Google Chrome 中不起作用。在 mozilla 中它运行良好。请帮助我。

jordi

# 2014 年 6 月 25 日

嘿，看起来是参数的顺序问题，
transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
试试
-webkit-transition: opacity .6s ease-in-out
而且，据我所知，“fade” 不是 CSS 属性，因此 CSS 过渡无法在其上运行，这就是我将你的规则从“fade” 修改为不透明度的原因。
而且，据我所知，那里有数千篇关于 CSS 过渡的文章，但以下是最棒的之一:)

transition

Nimitz

# 2014 年 11 月 3 日

参考链接失效。

fabio

# 2015 年 2 月 4 日

非常棒！我有一个问题... 它在 IE8 中有效吗？

Thad Bloom

评论永久链接# 2015 年 3 月 31 日

不，transform 或 transition 都无法在 IE8 中运行。查看 https://caniuse.cn/ - 这是查找此类信息的好资源。

David

# 2015 年 4 月 3 日

非常棒... 我使用了高度模式 (1, 1.1)...

Laurel

# 2015 年 5 月 30 日

我正在使用这种技术来放大链接上图标的悬停效果。它可以运行，但是图标在过渡完成后会弹回正常大小，而不是像你悬停时那样保持更大的尺寸。你可以在我的网站上看到它：

http://s542306109.onlinehome.us/webi1911/tokyo-pop/index.html#scene-8

这是相关的 html

<section class="container" id="scene-8">
            <div class="center-text">
                <h1 class="title">plan your visit</h1>
                <section>
                    <a href="http://www.moma.org/" target="_blank">
                        <img src="images/logo-kokeshi-ny.png" alt="">
                        <h2>New York</h2>   
                        <p>Museum of Modern Art</p>
                    </a>
                </section>
                <section>
                    <a href="http://www.moca.org/" target="_blank">
                        <img src="images/logo-kokeshi-la.png" alt="">
                        <h2>Los Angeles</h2>    
                        <p>Museum of Contemporary Art</p>
                    </a>
                </section>
                <section>
                    <a href="http://new.artsmia.org/" target="_blank">
                        <img src="images/logo-kokeshi-mpls.png" alt="">
                        <h2>Minneapolis</h2>    
                        <p>Minneapolis Institute of Art</p>
                    </a>
                </section>
            </div>
        </section>

这是我的 CSS

#scene-8 a {
    text-decoration: none;
    -webkit-transition: 1s ease;
           -moz-transition: 1s ease;
         -o-transition: 1s ease;
            transition: 1s ease;
}

#scene-8 a:hover {
    -webkit-transform: scale(1.1);
           -moz-transform: scale(1.1);
             -o-transform: scale(1.1);
            transform: scale(1.1);
}

有人知道有没有办法解决这个问题，让图标在鼠标移出之前一直保持更大的过渡尺寸吗？

Kenny

评论永久链接# 2015 年 5 月 30 日

嗨，是的，它似乎只在悬停时改变了一段时间。尝试将链接更改为 display: block 或 inline-block，似乎可以解决问题。
Laurel

评论永久链接# 2015 年 5 月 30 日

Kenny,

非常感谢，它解决了问题！
Kawal

评论永久链接# 2016 年 7 月 18 日

你的网站挂了，女士
Imran Sarwar

评论永久链接# 2016 年 11 月 1 日

你能用 CSS 给我一个固定响应式栏，左侧是公司名称吗？
ajay zara

评论永久链接# 2017 年 10 月 5 日

scale(1.1) 属性中的像素如何增加？或者 scale 的默认值是多少？

Joakim

# 2015 年 9 月 27 日

不过我在 Safari 中无法使其工作。

Joakim

永久链接到评论# 2015年9月27日

好的，我做到了。:)

苏

# 2015年10月19日

我以前从未使用过真正的代码，我正在尝试为定制T恤设计构建一个网站。我想知道完整的代码是什么，以及如何将其应用于图片库。
感谢您的帮助
非常感谢
苏

pyxal

# 2015年12月19日

如果您要缩放的元素是宽度为100% 的 img，那么此处提供的代码在Safari中可能存在问题。缩放动画将在页面加载时以及悬停时运行。若要解决此问题，请将transition属性中的“all”更改为“transform”。如下所示

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

pyxal

永久链接到评论# 2015年12月19日

呃，就是这样

.grow { transition: transform .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

Merianos Nikos

# 2016年2月2日

太棒了:) 谢谢；)

苏迪普

# 2016年2月6日

谢谢，它运行得很好。

苏米特

# 2016年4月1日

HTML

CSS:-
.section{position:relative;}
.hover{width:342px; height:260px; position:absolute; background-color:rgba(0,0,0,0.75); left:0; top:0; opacity:0; transition:all 0.7s ease-in-out;}
.hover:hover{opacity:1; transition: scale(1.1);}

苏米特

# 2016年4月1日

HTML

U.拉梅什

# 2016年4月28日

鼠标悬停时图片比鼠标移出时更大，我们可以保持相同的位置。在这张图片段落中，只有图片比...更大，我们无法更改段落... ... 如何使用CSS属性...？
回答...告诉我...

亨德里克

# 2016年5月27日

哇，谢谢，我一直在寻找像这样的简单东西，谢谢；)

艾什瓦莉亚

# 2016年7月24日

嗨，
我在其他地方尝试过。这也很简单，很好。
HTML 代码

body{
           font-family:san-serif;
      }

td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    width:300px;
    margin-left:2%;
     }

function bigImg(x) {
    x.style.height = "180";
    x.style.width = "200";
}

function normalImg(x) {
    x.style.height = "150";
    x.style.width = "150";
}

在图片源中，您可以提供您的图片路径。
试试这个。这也很不错。

感谢您。

赞娜

# 2016年9月12日

谢谢

巴哈

# 2016年9月19日

谢谢您

阿尚

# 2016年9月23日

谢谢。完美。

阿克沙伊

# 2016年10月4日

我想创建我的条形图，当鼠标悬停时，它应该增加高度，因此感谢本教程，它对我非常有用。

萨米

# 2016年11月17日

关于如何将放大的图片在悬停时居中于页面内，您有什么建议吗？

安德烈斯·弗洛雷斯

# 2017年5月3日

真是太棒了！！！

谭莫伊·比斯瓦斯

# 2017年5月25日

真的很感谢你。节省了大量时间，而且只有两行代码。

利奥

# 2017年8月31日

谢谢！

朱尔斯

# 2017年12月24日

是否有任何浏览器设置可以阻止/禁用悬停缩放和其他过渡？

它们可能显示出精湛的技术知识——但作为用户体验，它们通常很烦人，也很分散注意力……！

kyw

# 2018年7月1日

按钮内的文本在转换过程中变得模糊。有人有解决方法吗？

约翰·泽尼特

# 2018年12月18日

... 如果由于任何原因，上面的样式没有对目标元素生效，请为其设置display: block属性。

西德哈特

# 2019年5月9日

谢谢您

萨蒂什·沙伊

# 2019年6月23日

它工作得很好，但问题是我悬停时它会变得模糊 .1s！

埃多萨·奥萨吉

# 2019年7月23日

酷
但是，如何在缩放一个元素时将其他元素模糊化？

评论

发表评论 取消回复

发表评论取消回复