Quelqu'un peut-il m'aider à déterminer comment cet effet de vol stationnaire de soulignement animé animé est fait sur ce site? J'ai essayé de le reproduire moi-même mais je n'ai pas réussi. voici mon jsbinComment faire cet effet de survol animé animé?
Lorsque vous êtes survolez l'a href vous besoin d'écrire css et une fonction d'animation pour que vous ici, vous pouvez consulter mon code
a{
text-decoration:none;
}
a:hover {
border-bottom: 1px solid;
-webkit-animation: border-hover .6s infinite ease-in-out !important;
animation: border-hover .6s infinite ease-in-out !important
}
@-webkit-keyframes border-hover {
0%,
100% {
border-bottom-style: dotted
}
25%,
50% {
border-bottom-style: dashed
}
75% {
border-bottom-style: solid
}
}
@-moz-keyframes border-hover {
0%,
100% {
border-bottom-style: dotted
}
25%,
50% {
border-bottom-style: dashed
}
75% {
border-bottom-style: solid
}
}
@-o-keyframes border-hover {
0%,
100% {
border-bottom-style: dotted
}
25%,
50% {
border-bottom-style: dashed
}
75% {
border-bottom-style: solid
}
}
@keyframes border-hover {
0%,
100% {
border-bottom-style: dotted
}
25%,
50% {
border-bottom-style: dashed
}
75% {
border-bottom-style: solid
}
}<a href="#" class"link">Link goes here</a>Cela peut être fait avec transition et appliquer une propriété de bordure à votre conteneur
voir extrait de code ci-dessous
body{
background:black;
color:orange;
}
#somethin{
display:inline-block;
border-bottom:solid transparent 5px;
transition:all 1s;
}
#somethin:hover{
cursor:pointer;
border-bottom:solid red 5px;
}<div id="somethin">
Infinite Loop
</div>depuis le support de CSS3 pour le style de décoration de texte ne fonctionne pas, j'utilisé en bas de la frontière, voici un exemple de code:
<!html>
<html>
<head>
<style>
@keyframes cool-effect {
from {
border-bottom-style: solid;
}
50% {
border-bottom-style: dotted;
}
to {
border-bottom-style: dashed;
}
}
.fancy {
width : 300px;
border-bottom : 2px solid #000;
}
.fancy:hover {
-webkit-animation: cool-effect 1s infinite;
-o-animation:cool-effect 1s infinite;
animation: cool-effect 1s infinite;
}
</style>
</head>
<body>
<h2 class="fancy">Underline awesome effect !</h2>
</body>
</html>