我在一个 div 中有 3 条水平线。当我将鼠标悬停在封闭的 div 上时,我想旋转第一行和最后一行以形成 +
(加号)。
目前,当您将鼠标悬停在第一行和最后一行时,它们会旋转 90 度,但我希望当我将鼠标悬停在 div 内的任何位置时,这些行会旋转。我不确定是否单独使用 CSS3 可以做到这一点,或者我是否需要使用 jQuery。
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);
}
<div>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
最佳答案
为父 div 提供 :hover
伪类并定位其子类 — div:hover children
就是说,我对流畅的动画很着迷;这就是我在这个例子中所关注的,同时减少所需的标记。
让我们来做这个——中间的笔划逐渐消失,底部的笔划完成 360 度旋转,最终在中间结束。右边的两个例子更进一步。这些是低级 gif,在下面的演示中看起来好多了!
HTML
只需要一个 HTML 元素:
<div></div>
CSS
第一笔和第三笔是用
:before
and:after
pseudo elments 创建的.中间笔画是用 box shadow property 创建的
:之前
。他们创建与此相同的内容:<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;
}
<div></div>
更多例子
你可以用这个基本概念制作各种动画:
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;
}
}
<h2>Spinny</h2>
<div class="one"></div>
<h2>Circular Ripple</h2>
<div class="two"></div>
<h2>Heartbeat</h2>
<div class="three"></div>
关于css - 在父悬停时旋转跨度元素边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26958210/