我的结构如下:
html {
background-color: rgba(0, 0, 0, 0.75);
}
.container {
margin: 10% auto;
text-align: center;
}
div > span {
display: inline-block;
}
.horizontal {
display: inline-block;
position: relative;
top: .1em;
width: 15%;
}
.bubble {
display: inline-block;
padding: 0.5em;
background: url(http://imgh.us/Service_bubble.svg) no-repeat;
background-size: contain;
transition: all 0.3s ease-in-out;
}
.bubble:hover {
transform: scale(2) rotate(-90deg);
}
<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
</head>
<body>
<div class="container">
<div class="bubble">
<span class="fa fa-inverse fa-google fa-lg"></span>
</div>
<hr class="horizontal" />
<div class="bubble">
<span class="fa fa-inverse fa-facebook fa-lg"></span>
</div>
<hr class="horizontal" />
<div class="bubble">
<span class="fa fa-inverse fa-twitter fa-lg"></span>
</div>
<hr class="horizontal" />
<div class="bubble">
<span class="fa fa-inverse fa-github fa-lg"></span>
</div>
</div>
</body>
</html>
正如您在代码片段中看到的,当您将鼠标悬停在任何图标上时,包裹任何图标的气泡会放大,并向左旋转 90 度。 (这是预期的)。现在,我不想将旋转传播给子项 (div > span
)。它们应该按比例放大,但不应发生轮换。
此外,如果可能的话,我也想在图标悬停在其上方并缩放时替换 hr
。 hr
应该相应地移动,在气泡周围留一点余量。
我试过设置以下属性:
div > span:hover {
transform: scale(2);
}
但它在悬停时将图标放大 4 倍,并且仍然发生旋转。
有什么想法吗?我只想依赖 CSS,不想在这里涉及 JavaScript。
最佳答案
另一种解决方案是使用 伪
选择器 (:before
),它在 :hover
上进行旋转。
html {
background-color: rgba(0, 0, 0, 0.75);
}
.container {
margin: 10% auto;
text-align: center;
}
div > span {
display: inline-block;
}
.horizontal {
display: inline-block;
position: relative;
top: .1em;
width: 15%;
}
.bubble {
display: inline-block;
padding: 1em;
transition: all 0.3s ease-in-out;
position: relative;
}
.bubble:before {
content:'';
background: url(http://imgh.us/Service_bubble.svg) center no-repeat;
background-size: contain;
transition: all 0.3s ease-in-out;
height: 100%;
width: 100%;
position: absolute;
top: 0; left: 0;
}
.bubble:hover {
transform: scale(1.5);
margin: 0 10px;
}
.bubble:hover::before {
transform: rotate(-90deg);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<div class="bubble">
<span class="fa fa-inverse fa-google fa-fw fa-lg"></span>
</div>
<hr class="horizontal">
<div class="bubble">
<span class="fa fa-inverse fa-facebook fa-fw fa-lg"></span>
</div>
<hr class="horizontal">
<div class="bubble">
<span class="fa fa-inverse fa-twitter fa-fw fa-lg"></span>
</div>
<hr class="horizontal">
<div class="bubble">
<span class="fa fa-inverse fa-github fa-fw fa-lg"></span>
</div>
</div>
jsFiddle:https://jsfiddle.net/azizn/gypu0pn2/
我在您的原始代码中编辑了一些内容以创建更平滑的效果:
图标具有不同的宽度,导致不一致,因为
.bubble
容器没有定义尺寸(高度/宽度)。为了解决这个问题,我添加了fa-fw
类,它使图标固定宽度以实现更好的一致性。背景图片默认位于
左上
,除非更改为center
,否则可能会导致定位问题。“插入”效果是在
:hover
上使用添加的
margin
创建的
编辑:更简化的 HTML 结构。删除了 .bubble
容器并改用 :after
。
html { background-color: rgba(0, 0, 0, 0.75); }
.container { margin: 10% auto; text-align: center; }
.container hr {
display: inline-block;
position: relative;
top: .1em;
width: 15%;
}
.bubble {
padding: 1em;
position: relative;
transition: all 0.3s ease-in-out;
}
.bubble::after {
content:''; position: absolute;
background: url(http://imgh.us/Service_bubble.svg) center no-repeat;
background-size: contain;
transition: all 0.3s ease-in-out;
height: 100%; width: 100%;
top: 0; left: 0;
}
.bubble:hover {
transform: scale(1.5);
margin: 0 10px;
}
.bubble:hover::after { transform: rotate(-90deg); }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
<span class="bubble fa fa-inverse fa-google fa-fw fa-lg"></span>
<hr>
<span class="bubble fa fa-inverse fa-facebook fa-fw fa-lg"></span>
<hr>
<span class="bubble fa fa-inverse fa-twitter fa-fw fa-lg"></span>
<hr>
<span class="bubble fa fa-inverse fa-github fa-fw fa-lg"></span>
</div>
jsFiddle:https://jsfiddle.net/azizn/1uqrqoda/
关于html - CSS 中的变换比例/旋转效果不应影响 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36627466/