Html 如何使徽标在悬停时缩放

我有一个在我的导航栏左侧的标志，我希望它能够像有一个缩放效果，当你把鼠标悬停在任何想法？我确实在可待因上尝试了一些代码，但由于某些原因它们不起作用，我想我需要jquery，但我现在不想使用它。

.logo

是导航栏徽标。任何帮助都会很好

正文{
边际：0px；
填充：0px；
字体系列：Arial；
}
.导航{
保证金：0；
不透明度：0.7；
背景色：#FFD700；
颜色：黑色；
列表样式：无；
字体大小：粗体；
文本对齐：右对齐；
填充：25px 0 25px 0；
}
.nav>li{
显示：内联块；
填充：0 25px 0 25px；
}
.nav>li>a{
文字装饰：无；
颜色：黑色；
}
.nav>li>a:悬停{
颜色：#D2691E；
}
.标志{
颜色：黑色；
浮动：左；
位置：绝对位置；
顶部：-65px；
左：-210像素；
字体大小：20px；
字体大小：粗体；
}
.logo>a{
文字装饰：无；
颜色：黑色；
}
.logo>a:悬停{}
.横幅1{
宽度：100%；
显示：块；
}

特雷克森音乐

只需使用以下CSS即可

.logo img {
    transition: all 0.5s ease-in-out;
}
.logo:hover img {
    transform: scale(1.1,1.1);
    transform-origin: 0 0;
}

---

首先，使用.PNG或.JPG图像

然后在徽标图像上应用悬停效果

.logo img {
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.logo:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

---

这个概念可以在

中清除。您应该使用png、jpg、jpeg等。。。为了形象。不要使用.psd文件

如果你想要图像的缩放效果，只需添加下面的css

.logo img {
    transition: all 0.5s ease-in-out;
}
.logo:hover img {
    transform: scale(1.1,1.1);
    transform-origin: 0 0;
}

---

首先，如果要将徽标上载到网站，请使用以下web文件格式：

gif，png，jpeg

在psd编辑工具（如photoshop或illustrator中打开您的psd文件，并将其设置为上述格式之一

如果您想在悬停时获得缩放效果，请尝试使用CSS3

transition

和

transform

属性

.logo img {
  transition: transform 1s ease;
}
.logo:hover img {
  transform: scale(1.2,1.2);
}

---

.logo a>img:hover{height:100px；width:100px；}

嘿，我照你说的做了，但它在我到达logo之前悬停变焦了，有什么建议吗？我明白了。请更改css

。徽标img:hover{transform:scale（1.1,1.1）；transform origin:0；}