我正在尝试使用伪元素创建基本的悬停过渡。过渡工作正常,但元素在开始时“闪烁”。
关于如何绕过过渡闪光有什么想法吗?
问题在 codepen 中重现.
我尝试使用-webkit-backface-visibility
来hidden
来解决这个问题。它会停止闪光,但会从 View 中隐藏 ::before
伪元素。
html:
<a href="#">
<div class="cl">
<img src="http://placekitten.com/200/200" alt="" />
<span>meoww!</span>
</div>
</a>
CSS:
*,
*:after,
*::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
}
div {position:relative;}
span{
position:absolute;
left:0;
right: 0;
bottom:50%;
color: black;
text-align:center;
}
a {
position: relative;
display: inline-block;
margin: 15px 25px;
outline: none;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font-size: 1.35em;
}
a:hover, a:focus {
outline: none;
}
.cl {
padding: 0 20px;
line-height: 0;
}
.cl::before,
.cl::after {
position: absolute;
width: 45px;
height: 2px;
background: #fff;
content: '';
opacity: 0.2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
pointer-events: none;
}
.cl::before {
top: 0;
left: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
.cl::after {
right: 0;
bottom: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.cl:hover::before,
.cl:hover::after,
.cl:focus::before,
.cl:focus::after {
opacity: 1;
}
.cl:hover::before,
.cl:focus::before {
left: 50%;
-webkit-transform: rotate(0deg) translateX(-50%) translateY(75px);
-moz-transform: rotate(0deg) translateX(-50%) translateY(75px);
transform: rotate(0deg) translateX(-50%) translateY(75px);
}
.cl:hover::after,
.cl:focus::after {
right: 50%;
-webkit-transform: rotate(0deg) translateX(50%) translateY(-75px);
-moz-transform: rotate(0deg) translateX(50%) translateY(-75px);
transform: rotate(0deg) translateX(50%) translateY(-75px);
}
最佳答案
.cl {
-webkit-backface-visibility: hidden;
padding: 0 20px;
}
关于html - CSS:使用伪元素时停止父元素闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21209063/