hjp*_*r92 6 css html5 css3 css-transitions css-transforms
我的结构如下:
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度.(预计).现在,我不想将旋转传播给children(div > span).它们应该向上扩展,但不应该发生旋转.
此外,如果可能的话,我也想替换hrs,当图标悬停在上面时,它会缩放.在hrS的关系相应做出调整,使气泡周围一点点保证金.
我试过设置以下属性:
div > span:hover {
transform: scale(2);
}
但是当悬停时它会将图标放大4倍,并且仍然会发生旋转.
有任何想法吗？我只想依靠CSS,并且不想在这里涉及JavaScript.
另一种解决方案是使用pseudo选择器 ( :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使图标固定宽度的类，以提高一致性。
背景图像top left默认定位为 ，除非更改为 ，否则可能会导致定位问题center。
“推”效果是使用添加创建margin的:hover
编辑：更简化的 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/