[英]Double underline effect CSS
I have this code from the Hover.css pack : 我有来自Hover.css包的代码:
.hvr-underline-from-left{
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-underline-from-left::before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 0;
background: #0F9E5E;
height: 0.3em;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover::before, .hvr-underline-from-left:focus::before, .hvr-underline-from-left:active::before {
right: 0;
}
What this does is that it adds a buttom border to a button that appeares from the left on hover. 它的作用是它为悬停时从左侧显示的按钮添加了一个按钮边框。
But the effect i want is this, but multible times. 但我想要的效果是这个,但多次。 So this should be added multible times with 0.1s delay every time, and an other color. 所以这应该多次添加,每次延迟0.1秒,另一种颜色。 How would i do this? 我该怎么办? I tried using ::before(n)
but it didn't work. 我尝试使用::before(n)
但它没有用。
You can use after pseudo class to get the double underline effect. 您可以使用after伪类来获得双下划线效果。
//same as before class except for transition delay and bottom position you can adjust that as needed
.hvr-underline-from-left::after {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 100%;
bottom: 10px;
background: #0F9E5E;
height: 0.3em;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
// on hover effect for after same as before class.
.hvr-underline-from-left:hover::after,
.hvr-underline-from-left:focus::after,
.hvr-underline-from-left:active::after {
right: 0;
}
//to add more
.hvr-underline-from-left .hvr-underline-from-left{
position:absolute;
height:100%;
width:100%;
background:transparent;
top:0;
left:0;
z-index:1000;
}
.hvr-underline-from-left .hvr-underline-from-left:after{
bottom:20px;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-underline-from-left .hvr-underline-from-left:before{
bottom:30px;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
// and div tags look like this
<div class="hvr-underline-from-left">
<div class="hvr-underline-from-left">
</div>
</div>
****Please be careful once you give the inner container z-index and bring it to the front with 100% height and width any elements inside the main container might not be clickable. ****给内部容器z-index后请小心,并将其带到100%高度和宽度的前面,主容器内的任何元素都可能无法点击。
Alternatively You can use css animation keyword for getting this multiple times underline effect with different color.and Adjust time according to your need. 或者您可以使用css 动画关键字多次获得不同颜色的下划线效果。并根据您的需要调整时间。 eg 例如
.hvr-underline-from-left{ display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; overflow: hidden; } .hvr-underline-from-left::before { content: ""; position: absolute; z-index: -1; left: 0; right: 100%; bottom: 0; height: 0.3em; -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .hvr-underline-from-left:hover::before { animation:colorUnderline 2s; animation-fill-mode: forwards; } @keyframes colorUnderline{ 0%{ right:100%; background: #0F9E5E; } 25%{ background: #0F9E5E; right:0; } 26%{ background: #8e44ad ; right:100%; } 50%{ background: #8e44ad ; right:0; } 51%{ background: #e74c3c ; right:100%; } 75%{ background: #e74c3c ; right:0; } 76%{ background: #f1c40f ; right:100%; } 100%{ right:0; background: #f1c40f ; } }
<body> <div class="hvr-underline-from-left">Test</div> </body>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.