Ankündigung

Einklappen
Keine Ankündigung bisher.

Unterstrich Animation mit CSS?

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Unterstrich Animation mit CSS?

    Hallo Homepage Forum,

    Ich habe vor kurzem ein bisschen im Web rumgeklickt und habe mir dabei auch einige Internetseiten von ehemaligen Kunden angeschaut.
    Einer davon hat eine ganz coole Animation die ebenfalls für eine meiner Seiten interessant wäre.
    Es ist eine Art geschwungener Unterstrich unter der Überschrift. Aber seht selbst zum Thema: Haushaltsauflösung

    Es ist kein Bild, man kann es nicht kopieren es ist kein richtiges Element alles was ich dazu finde ist das:
    <path d="M7.7,145.6C109,125,299.9,116.2,401,121.3c42.1,2 .2,87.6,11.8,87.3,25.7"></path>

    Kann mir jemand etwas mehr dazu sagen? Am besten wie ich sowas mache? Ist das css2?
    Danke euch.

  • #2
    Hi,
    das seht im svg-Tag, siehe hier.

    Gruß
    Ingo
    Ingo Webdesign

    Kommentar


    • #3
      Svg ist so ein Thema womit man sich auch auskennen muß.
      Möglichkeiten gibt es da viele.

      Man könnte es auch mit Css machen
      HTML-Code:
      <style>
      p:after{
      content: "";
      position: absolute;
      height: 15px;
      width: 200px;
      left: 5px;
      top: 70px;
      border-top: 2px solid red;
      border-radius: 50%;
      }
      p{
      font-size:35px;
      color:red;
      width:200px;
      }
      </style>
      <p>Test unterline</p>
      Da sind die möglichkeiten aber begrenzt
      Mein (Basti1012) Forum und Chat

      Kommentar


      • #4
        Cool Danke euch!

        Ich werde mir diese SVG Tags mal etwas genauer anschauen!

        Danke euch!

        Kommentar


        • #5
          Hallo, hat mich jetzt selbst interessiert. Die haben das wohl so gemacht:

          HTML-Code:
          <!DOCTYPE html>
          <html lang="de">
          <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>animated text underlined
          </title>
          <style>
          .animated-heading-highlighted-wrap svg {
          position: absolute;
          top: 50%;
          left: 50%;
          width: calc(100% + 20px);
          height: calc(100% + 20px);
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          overflow: visible!important
          }
          .animated-heading-highlighted-wrap svg path {
          stroke: #f44336;
          stroke-width: 10;
          fill: none;
          stroke-dasharray: 1500;
          -webkit-animation-name: highlighted-text-animation;
          animation-name: highlighted-text-animation;
          -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
          -webkit-animation-duration: 14s;
          animation-duration: 14s
          }
          .animated-heading-highlighted-wrap svg path:nth-of-type(2) {
          -webkit-animation-delay: .6s;
          animation-delay: .6s
          }
          @-webkit-keyframes highlighted-text-animation {
          0% {
          stroke-dasharray: 0 1500
          }
          15% {
          stroke-dasharray: 1500 1500
          }
          85% {
          opacity: 1
          }
          90% {
          stroke-dasharray: 1500 1500;
          opacity: 0
          }
          to {
          stroke-dasharray: 0 1500;
          opacity: 0
          }
          }
          @keyframes highlighted-text-animation {
          0% {
          stroke-dasharray: 0 1500
          }
          15% {
          stroke-dasharray: 1500 1500
          }
          85% {
          opacity: 1
          }
          90% {
          stroke-dasharray: 1500 1500;
          opacity: 0
          }
          to {
          stroke-dasharray: 0 1500;
          opacity: 0
          }
          }
          .animated-heading-highlighted-text {
          position: relative;
          display: inline-block;
          z-index: 1;
          padding: 5px 5px 10px;
          text-transform: uppercase;
          font-weight: 700;
          color: #222454;
          font-size: 48px;
          text-align: center;
          }
          .wrap {
          margin: 20px auto;
          height: 60px;
          width: 300px;
          position: relative;
          text-align: center;
          }
          
          </style>
          </head>
          <body>
          <div class="wrap">
          <span class="animated-heading-highlighted-wrap">
          <span class="animated-heading-highlighted-text shape-underline">! Ta Daa !
          </span>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 150" preserveAspectRatio="none">
          <path d="M7.7,145.6C109,125,299.9,116.2,401,121.3c42.1,2 .2,87.6,11.8,87.3,25.7">
          </path>
          </svg>
          </span>
          </div>
          </body>
          </html>
          Hier müssen jetzt noch der Text, Größe, Geschwindigkeit nach belieben eingestellt werden.

          Viele Grüße

          Kommentar

          homepage-forum.de - Hilfe für Webmaster! Statistiken

          Einklappen

          Themen: 56.802   Beiträge: 430.056   Mitglieder: 28.555   Aktive Mitglieder: 54
          Willkommen an unser neuestes Mitglied, Fohlenfan.

          Online-Benutzer

          Einklappen

          277 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 275.

          Mit 3.502 Benutzern waren am 23.01.2020 um 18:20 die meisten Benutzer gleichzeitig online.

          Die neuesten Themen

          Einklappen

          Die neuesten Beiträge

          Einklappen

          Lädt...
          X