我试图复制边框悬停效果,但我不明白为什么我需要使用:: before和:: after来实现此CSS效果。
这是页面示例,其中包含我要使用css复制的内容(我想复制边框效果):
http://77.238.26.244:81/confimi/pagina-di-test/
这是我尝试复制CSS的主页:
http://77.238.26.244:81/confimi/
在第一行中有“示例”,在下面的行中有我的尝试
这是我编写的代码:
round {
background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
}
.layer {
background-color: rgba(18, 29, 47, 0.96);
background-repeat: repeat;
width: 100%;
height: 100%;
text-align: center;
padding: 200px 20px 200px 20px;
}
.div-diviso {
width: 17%;
margin: 10px;
display: inline-block;
position: relative;
box-sizing: border-box;
}
.div-diviso img {
width: 100%;
position: relative;
}
.div-diviso .overlay {
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transform: scale(0.1);
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
-o-transform: scale(0.1);
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
visibility: hidden;
}
.div-diviso:hover .overlay {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
visibility: visible;
border: 3px solid #ffffff;
transform: border scale3d(0, 1, 1);
}
@media (min-width: 768px) and (max-width: 980px) {
.layer {
text-align: center;
}
.div-diviso {
width: 47%;
margin: 10px;
}
}
@media (max-width: 767px) {
.layer {
text-align: center;
}
.div-diviso {
width: 98%;
margin: 5px;
}
}
<div class="background">
<div class="layer">
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/CLAUDIO-ZAMPARELLI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/ROBERTA-MAGNANI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/BARBARA-VANNI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg">
<div class="overlay">
</div>
</div>
</dvi>
</div>
您不能在CSS中从中间为边框设置动画。它们将从的起点自动过渡div
(或者,如果您要使用,则从相反的一端)自动过渡transform: rotate(180deg)
。因此,::before
&::after
元素的用法。
另外,transform: border scale3d(0, 1, 1);
无效,因为border
CSS3属性不适用于transform
。
如果您不想使用伪元素,则可以使用边框上较晚的外观。但是,它不会从中间发出动画。
将CSS修改为:
.div-diviso:hover .overlay {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
visibility: visible;
border: 3px solid #ffffff;
transition: border 0.75s;
}
编辑
如果确实要使用伪选择器,请应用以下CSS:
.div-diviso:hover .overlay:before, .div-diviso:hover .overlay:after {
height: 100%;
top: 0;
width: 100%;
left: 0;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.div-diviso .overlay:before, .div-diviso .overlay:after {
content: '';
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 9;
}
.div-diviso .overlay:after {
content: '';
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 50%;
border-top: 3px solid #20bed0;
border-bottom: 3px solid #20bed0;
}
.div-diviso .overlay:before {
width: 100%;
height: 0;
position: absolute;
top: 50%;
left: 0;
border-left: 3px solid #20bed0;
border-right: 3px solid #20bed0;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句