Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Border animation css
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Maze123987
11.06.2014, 11:23:23
Próbuję stworzyć w css dwa border animations, ktore po najechaniu myszka "hover" podkresla tekst. Jeden border ma wysuwac sie od prawej do lewej drugi na odwrot. Jeden jest nad, drugi pod tekstem, niestety póki co oba bordery są nad tekstem, rzeczywiscie jeden leci od prawej do lewej drugi od lewej do prawej, ale spotykaja sie gdzies po srodku i łączą. Jak przerzucic jeden border pod tekst? Kombinowalem z pozycją i nie bardzo mi idzie.


kod css


[HTML] pobierz, plaintext 
  1. .klasa h3::before,
  2. .klasa h3::after {
  3.   display: run-in;
  4. position:absolute;
  5.   -webkit-transition:  -webkit-transform 1s, width 1s ease;
  6.   -moz-transition:  -moz-transform 1s,  width 1s ease;
  7.   transition:  transform 1s,  width 1s ease;
  8. }
  9.  
  10. .klasa h3::before {
  11.  
  12.   content: '';
  13.   color:#428BCA;
  14.  
  15. width:0;
  16. border-top: 1px solid blue;
  17.     font-size: 50px;
  18.  
  19.     font-weight: 400;
  20.   -webkit-transform: translateY(0px);
  21.   -moz-transform: translateY(0px);
  22.   transform: translateY(0px);
  23. }
  24. .klasa h3:hover::before {
  25.   margin-left: 3px;
  26.   content: '';
  27.   color:#428BCA;
  28.   line-height: 16px;
  29. width:25%;
  30. border-top: 1px solid blue;
  31.   -webkit-transform: translateY(0px);
  32.   -moz-transform: translateY(0px);
  33.   transform: translateY(0px);
  34.  
  35. }
  36. .klasa h3::after {
  37.  
  38.   content: '';
  39.   color:#428BCA;
  40.  
  41. width:0;
  42. border-bottom: 1px solid blue;
  43.     font-size: 50px;
  44.  
  45.     font-weight: 400;
  46.   -webkit-transform: translateX(0px);
  47.   -moz-transform: translateX(0px);
  48.   transform: translateX(0px);
  49. }
  50. .klasa h3:hover::after {
  51.   margin-left: 3px;
  52.   content: '';
  53.   color:#428BCA;
  54.   line-height: 16px;
  55. width:25%;
  56. border-bottom: 1px solid blue;
  57.  
  58.   -webkit-transform: translateX(0px);
  59.   -moz-transform: translateX(0px);
  60.   transform: translateX(0px);
  61. }
  62. .klasa h3:hover::before{
  63.  
  64.   -moz-transform: translateX(0px);
  65.   transform: translateX(0px);
  66.   -moz-transform-style: preserve-3d;
  67. -ms-transform-style: preserve-3d;
  68. -webkit-transform-style: preserve-3d;
  69. transform-style: preserve-3d;
  70. }
  71.  
  72. .klasa h3:hover::after {
  73.  
  74.   -webkit-transform: translateX(-300px);
  75.   -moz-transform: translateX(-300px);
  76.   transform: translateX(-300px);
  77.   -moz-transform-style: preserve-3d;
  78. -ms-transform-style: preserve-3d;
  79. -webkit-transform-style: preserve-3d;
  80. transform-style: preserve-3d;
  81. }
  82.  
  83. div.klasa h3:hover {
  84.   outline: none;
  85. }
[HTML] pobierz, plaintext



html:

[HTML] pobierz, plaintext 
  1. <div class="klasa"><h3 class="logo">Tekst</div></h3></div>
[HTML] pobierz, plaintext


@bump

Moze ktos wie jak po prostu zrobic animacje border top I bottom jedna od lewej do prawej, druga od prawej do lewej
MountainDew
12.06.2014, 14:26:40
Nie wiem czy dobrze zrozumiałem potrzebę: http://codepen.io/anon/pen/wHDBo
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.