CSS + HTML

25106 ワード
tutorial html synthwave css テキストリンク
エルdは、デホイvamos Aは、Craar Animaci

テ

  • creaci n del del cuerpo ( html )
  • Agregarの推定値😎
  • ALリポジトリ🚀

    • Empecemos creando el cuerpo de nuestra vista (HTML)

    index.html
    <body class="synthwave-background">
</body>

    Nunca, pero nunca apliques estilos sobre la etiqueta body del documento si planeas usar estos estilos en producción o en proyectos más grandes ! 🚫


    ニュージャージーPは、gina necesita un textoにmostrar、アママノのラオブラ!
    <body class="synthwave-background">
    <div class="_80s-text">
        <h1>Synthwave</h1>
    </div>
</body>

    Agregar el sol con las líneas características del synthwave fue algo complicado, especialmente si eres nuevo en css, la primera opción sería utilizar una imagen, pero no se veía tan bien como se esperaba, sin embargo, se pueden crear con puros elementos HTML! 😳


    <body class="synthwave-background">
    <div class="_80s-text">
        <h1>Synthwave</h1>
    </div>
    <div class="sun">
        <div class="lines">
            <div class="line" style="--pos:1;"></div>
            <div class="line" style="--pos:2;"></div>
            <div class="line" style="--pos:3;"></div>
            <div class="line" style="--pos:4;"></div>
            <div class="line" style="--pos:5;"></div>
            <div class="line" style="--pos:6;"></div>
            <div class="line" style="--pos:7;"></div>
        </div>
    </div>
</body>
    AQU - Dubujamos L . Nea Por l ' Turn L . Name , Cp , Ala m s s , Le indicamos la variable --pos:N para Realizar un c Le Lculo que M - res s Adelante Veremos

    Finalmente, nos queda representar el suelo que se animará, de la misma manera, crear este elemento es un poco complicado, y aunque una imagen parezca la mejor solución, encontramos una forma más eficiente y continuamos con #PURECSS.


    <body class="synthwave-background">
    <div class="_80s-text">
        <h1>Synthwave</h1>
    </div>
    <div class="sun">
        <div class="lines">
            <div class="line" style="--pos:1;"></div>
            <div class="line" style="--pos:2;"></div>
            <div class="line" style="--pos:3;"></div>
            <div class="line" style="--pos:4;"></div>
            <div class="line" style="--pos:5;"></div>
            <div class="line" style="--pos:6;"></div>
            <div class="line" style="--pos:7;"></div>
        </div>
    </div>
   <div class="road"></div><!-- Sí, eso es todo 😳 -->
</body>

    ¡Vamos a estilizar!

    app.css
    * {
  box-sizing: border-box;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Helvetica Neue", Arial, sans-serif;
}
    Empecemosは、ラスべガスパラシュートで降下します.
    連続して、n、agregaremos una fuente para que se vea mucho m
    
@font-face {
  src: url("./assets/Neon.ttf");
  font-family: "Neon";
}

    Esa fuente la encontrarás en el repositorio 😉


    Ahora S ' s , Vamos a Crear el Fondo :
    .synthwave-background {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    rgb(20, 39, 79) 0px,
    rgb(242, 21, 119) 500px,
    rgb(20, 39, 79) 500px
  );
}
    <研究ノート>デモラード・ド・フォンドにおける継続的な試み
    .road {
  width: 100%;
  height: 40em;
  overflow: hidden;
}
    Loの前のソロEssenifica suタマ
    /*.road*/
...
background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0px,
      rgba(62, 250, 240, 0.5) 0%,
      rgba(62, 250, 240, 0.5) 3px,
      rgba(0, 0, 0, 0) 0px
    ),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0) 0px,
      rgba(62, 250, 240, 0.5) 0%,
      rgba(62, 250, 240, 0.5) 3px,
      rgba(0, 0, 0, 0) 0px
    );
    Emoクレアーは、ウナMalla詐欺cubos trazados comoグラデテネス、Genialノーです?
    Parterminar con el susuo , agregamos las siguientes reglas :
      /*.road*/
  ...
  background-size: 2em 1em, 2em 1em;
  background-color: rgb(20, 39, 79);
  perspective: 1000px;
  margin-top: 20em;
  transform: perspective(200px) rotateX(45deg) scale(2);
  animation: road 10s linear infinite;
    フォンデ・エ・タマにおけるフォンドー・フォン・ドゥード・フォン・スーパーティヴの意味論的考察:ルティオとナチスの概念

    Vamos a continuar creando el sol


    .sun {
  width: 400px;
  height: 400px;
  background: linear-gradient(180deg, #faf09d 0%, #fc9093 52.08%, #e92077 100%);
  border-radius: 50%;
  z-index: 1;
  margin: 0 auto;
  position: absolute;
  top: 100px;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}
    ああ、クレアモスは、div円形の詐欺エル分解物デルゾルを分類します.
    スペイン語の連続性について
    .sun > .lines {
  width: 100%;
  height: 50%;
  position: relative;
  bottom: -60%;
  border-radius: 0 0 50% 50%;
  overflow: hidden;
}
    エラスRegas Nos Bastarは、nのパラ場面La L .
    <研究ノート> Ltimo , Vamos A Testlizar Cada L - All del Sol , como sabr des s , Cada l - All Tiene un Tama - no o o市長L . L . Nea Forest , Esto Lo Logramos Con Este Bloque :
    .lines > .line {
  width: 100%;
  height: calc(5px * var(--pos));
  background-color: rgba(0, 0, 0, 0.3);
  mix-blend-mode: overlay;
  margin-bottom: 1rem;
}
    La可変--pos NOSサーヴィアは、Aumentarエルタマを引きます.

    Vamos a animar nuestro suelo:


    @keyframes road {
  from {
    transform: perspective(200px) rotateX(45deg) scale(1.5);
  }
  to {
    transform: perspective(200px) rotateX(45deg) scale(2.1);
  }
}
    Limtimo , Pollizzareos Los Textos en Nuestro sitio :
    ._80s-text {
  font-size: 6em;
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 4;
}
._80s-text > h1 {
  font-family: "Neon", Arial, Helvetica, sans-serif;
  width: 100%;
  text-align: center;
  color: rgb(252, 121, 218);
  text-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 10px rgb(234, 38, 171),
    0 0 10px rgb(234, 38, 171), 0 0 15px rgb(234, 38, 171),
    0 0 20px rgb(234, 38, 171), 0 0 25px rgb(234, 38, 171);
}

    結果



    Enlace al repositorio


    <研究ノート>デカルトに於ける二,三,二,三の二,三の二,三,二,三,二,二,三の二,三,二,三
    社会的なy Aqueがパラシュートで降下するというGenos En Nuestraを無視してください.
    Swift4で何がかわりそうなのか
    JSONツール類、操作JSONタイプデータ