在父悬停上旋转跨度元素边框

Question

我在div中有3条水平线。当我将鼠标悬停在封闭的div上时，我想旋转第一行和最后一行以形成+（加号）。

此刻，当您将鼠标悬停在第一行和最后一行时，它们会以90度旋转，但当我将鼠标悬停在div中的任何位置时，我希望这些线条能够旋转。我不确定CSS3是否可以单独执行此操作，或者我是否需要使用jQuery。

Here is a fiddle以下内容：

＆＃13;

＆＃13;

div {
  width: 100px;
  height: 100px;
  background-color: red;
  padding-top: 15px;
}
div .bar {
  border-bottom: 5px solid #ffffff;
  height: 10px;
  width: 50px;
  display: block;
  margin: 5px auto;
}
div .bar:first-child:hover {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}
div .bar:last-child:hover {
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

＆＃13;

<div>
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

为父div提供:hover伪类并定位其子项 - div:hover children

---

那就是说，我是一个平滑动画的傻瓜;这是我在这个例子中所关注的内容，同时减少了所需的标记。

让我们做到这一点 - 中间笔划消失，底部笔划完成360度旋转，最终在中间。右边的两个例子更进一步。这些低级GIF在下面的演示中看起来好多了！

HTML

只需要一个HTML元素：

<div></div>

CSS

• 使用:before and :after pseudo elments创建第一个和第三个笔划。

• 使用:before <div> <div>I am :before</div> I am an illusion created by box-shadow <div>I am :after</div> </div> 创建中间笔划。它们的创建方式与此相同：

  div:before, div:after { transition: all 0.3s; }

• 平滑过渡由div:before, div:after { transition: all 0.3s; } div { width: 100px; height: 100px; background-color: red; position: relative; cursor: pointer } div:before, div:after { content: ''; height: 5px; width: 50px; display: block; position: absolute; background: #FFF; left: 50%; top: 50%; margin-left: -25px; transform: rotate(0); } div:before { margin-top: -20px; box-shadow: 0 20px 0 #FFF; } div:after { margin-top: 20px; } div:hover:after { margin-top: 0; transform: rotate(360deg); } div:hover:before { margin-top: 0; transform: rotate(90deg); box-shadow: none; }

给出

完整示例 - 简单转换

＆＃13;

＆＃13;

<div></div>

＆＃13;

h2 {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.8em;
}

div,
div:before,
div:after {
  transition: all 0.3s;
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  margin: 10px;
}
div:before,
div:after {
  content: '';
  height: 5px;
  width: 50px;
  display: block;
  position: absolute;
  background: #FFF;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  transform: rotate(0);
}
div:before {
  margin-top: -20px;
  box-shadow: 0 20px 0 #FFF;
}
div:after {
  margin-top: 20px;
}
div.one:hover:after {
  margin-top: 0;
  transform: rotate(360deg);
}
div.one:hover:before {
  margin-top: 0;
  transform: rotate(450deg);
  box-shadow: none;
}
div.two:hover {
  border-radius: 50%;
  transform: rotate(180deg);
}
div.two:hover:after {
  margin-top: -3px;
  transform: rotate(360deg);
  width: 30px;
  margin-left: -16px;
}
div.two:hover:before {
  margin-top: -3px;
  transform: rotate(450deg);
  box-shadow: none;
  width: 30px;
  margin-left: -16px;
}
div.three {
  box-shadow: 0 0 1px #F00;
}
div.three:hover {
  border-radius: 50%;
  transform: rotate(360deg);
  box-shadow: 0 0 30px #F00;
  -webkit-animation: pulse 1s infinite;
  animation: pulse 1s infinite;
}
div.three:hover:after {
  margin-top: -3px;
  transform: rotate(360deg);
  width: 30px;
  margin-left: -16px;
}
div.three:hover:before {
  margin-top: -3px;
  transform: rotate(450deg);
  box-shadow: none;
  width: 30px;
  margin-left: -16px;
  
}
@-webkit-keyframes pulse {
  0% {
    transform: scale(1);  
    box-shadow: 0 0 5px #F00;
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 30px #F00;
  }
  100% {
    transform: scale(1);  
    box-shadow: 0 0 5px #F00;
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);  
    box-shadow: 0 0 5px #F00;
  }
  50% {
    transform: scale(1.05);  
    box-shadow: 0 0 30px #F00;
  }
  100% {
    transform: scale(1);  
    box-shadow: 0 0 5px #F00;
  }
}

＆＃13;

＆＃13;

＆＃13;

更多例子

您可以使用以下基本概念制作各种动画：

＆＃13;

＆＃13;

<h2>Spinny</h2>
<div class="one"></div>

<h2>Circular Ripple</h2>
<div class="two"></div>

<h2>Heartbeat</h2>
<div class="three"></div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用Pseudo elements和box shadow

＆＃13;

＆＃13;

div {
    width: 100px;
    height: 100px;
    background-color: red;
    padding-top:15px;
    position: relative;
}
div:before, div:after{
    content: "";
    position:absolute;
    width:80px;
     height:8px;
    background: white;
}
div:after{
    display:none;
}
div:before{
    left:10px;
    top:30px;
    box-shadow: 0 20px 0 white,0  40px white
}
div:hover:before{
    box-shadow:none;
    top:50px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
div:hover:after{
    display:block;
    left:10px;
    top:50px;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

如果你想避免变换和盒子阴影，你可以这样做

＆＃13;

＆＃13;

div {
    width: 100px;
    height: 100px;
    background-color: red;
    padding-top:15px;
    position: relative;
}
div:before, div:after{
    content: "";
    position:absolute;
}
div:after{
    width:80px;
    height:8px;
    background: white;
    top: 50px;
    left:10px;
}
div:before{
    left:10px;
    top:30px;
    width:80px;
    height:34px;
    border-top: 8px solid white;
    border-bottom: 8px solid white;
}
div:hover:before{
    border:none;
    height:80px;
    width:8px;
    background:white;
    left:44px;
    top:20px
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

当悬停时匹配div中第一个条的规则看起来像

div:hover .bar:first-child

不

div .bar:first-child:hover

fiddle