wie, um text-zoom-Effekt in css

Möchte ich zu vergrößern, den text so wie diese. aber in diesem text opacity:0. Ich habe nicht zu verbergen von text die Opazität des Textes:1 und ich will keine box, wie das nur-text wäre zoom

Ich habe Folgendes versucht, aber ohne Erfolg:

CSS:

ul li {
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}

ul li:hover {
  transform: translateY(100px);
  transition: all 0.3s ease-in-out 0.1s;
}

HTML:

<ul>
  <li>Text effect</li>
  <li>Text effect</li>
</ul>

  • aber in diesem text opacity:0. Ich habe nicht zu verbergen, die text - okay, so kann Sie nicht einfach entfernen opacity:0?
  • Nicht verstecken der text wird der text sehr groß auf dem Bildschirm. Ist das wirklich das, was Sie wollen?
  • wenn Sie die Deckkraft, es funktioniert nicht warum
  • Haben Sie meine demo unten?
  • Ich denke OP will der text nicht ausgeblendet werden, sondern animieren, von der linken und wachsen/schrumpfen gleichzeitig.
InformationsquelleAutor Anubhav pun | 2016-05-20
  1. 4

    Probieren Sie etwas wie dieses:

    HTML

      <ul>
    <li><p>Text effect</p></li>
    <li><p>Text effect</p></li>
  </ul>

    Css

    ul li{
  width: 100px;
  height: 100px;
  background: red;
  color: white;
  display: inline-block;
  float: left;
  margin: 10px;
  overflow: hidden;
  text-align: center;
}
ul li p {
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}
ul li:hover p{
  opacity: 1;
  transform: scale(1);
  transition: all 0.3s ease-in-out 0.1s;
}

    Versuchen hier http://jsbin.com/xohimubeso/edit?html,css-Ausgabe

    • Nein, ich habe nicht zu verbergen, der text der text angezeigt werden würde und li width:100%
    • Kann nicht verstehen sehr gut, was Sie tun wollen, aber diese version sollte passen jsbin.com/bocokajufa/3/edit?html,css,Ausgang
    • danke dieser link funktioniert für mich
    • wow, Sie konnte es nicht einfach entfernen Sie die opacity selbst? Es ist buchstäblich nur das entfernen, dass eine Zeile...
    InformationsquelleAutor Davide Effe
  2. 2

    Mit transform: scale() wie du hast, ist ein guter Weg, um dies zu implementieren. Allerdings werden Sie wollen, setzen den Maßstab, um es den normalen Wert, wenn :hover.

    Seit li haben standardmäßig display: list-item nehmen Sie bis zu 100% der verfügbaren Breite an. Als solche, tut das Zoomen auf das Zentrum des li wenn der text Links ausgerichtet wird der text verschwinden. Wickeln Sie Ihren text in einer span hat display: inline-block um zu vergrößern auf die Mitte des Textes statt.

    Auch, die website, von der Sie verknüpft hat, die text-fade in/out als auch. Hinzufügen opacity: 0 zu Ihrem span machen ihn unsichtbar, und dann haben Sie den übergang zu opacity: 1 auf :hover dies zu erreichen, fade in/out Effekt.

    Auch transform: translateY(100px) ist wohl nicht nötig, noch ist die doppelte transition Eigenschaft in Ihrem :hover.

    Demo 1 - ohne opacity, keine box, animiert von Links

    CSS:

    ul li {
  background: lightgrey;
  list-style: none;
  margin: 5px 0;
}
ul li span {
  position: relative;
  left: -100%;
  font-size: 20px;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}
ul li:hover span {
  left: 0;
  transform: scale(1);
}
span {
  display: inline-block;
}

    HTML:

    <ul>
  <li><span>Text effect</span></li>
  <li><span>Text effect</span></li>
  <li><span>Text effect</span></li>
  <li><span>Text effect</span></li>
</ul>

    Demo 2 - mit opacity box. Wie dargestellt in der beigefügten link

    CSS:

    ul li {
  list-style: none;
  width: 200px;
  height: 200px;
  border: 5px solid black;
  margin: 10px;
  background: #FAEBD9;
  overflow: hidden;
  float: left;
}
ul li span {
  font-size: 20px;
  opacity: 0;
  transform: scale(10);
  transition: all 0.3s ease-in-out 0.2s;
}
ul li:hover span {
  opacity: 1;
  transform: scale(1);
}
span {
  display: inline-block;
}

    HTML:

    <ul>
  <li><span>Text effect</span></li>
  <li><span>Text effect</span></li>
  <li><span>Text effect</span></li>
  <li><span>Text effect</span></li>
</ul>

    InformationsquelleAutor Chris
  3. 1

    können Sie Folgendes tun:

    HTML:

    <style>
#test-text:hover {
font-size: 20px;
}


</style>

<body>
<p id=test-text>TEST</p>
</body>

    InformationsquelleAutor Nikola Bogdanovic
Schreibe einen Kommentar