TESTACCOUNT's profile picture

Published by

published
updated

Category: Web, HTML, Tech

View Blog View Profile Report Blog Entry

codes

      1. dashedscroll: <style>
      2. #dashedscroll {
      3. height: 200px;
      4. width: 100%;
      5. padding: 10px;
      6. border:3px dashed #737373;
      7. font-size:150%;
      8. font-weight:bold;
      9. color: #000;
      10. overflow: auto;
      11. }
      12. </style>
      13. <div id="dashedscroll">
      14. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
      15. </div> marquee text
        1. <marquee behavior="scroll" direction="right">text</marquee> VHS STYLE
          <style>

          .noise {
          position: fixed;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          overflow: hidden;
          z-index: 400;
          opacity: 0.8;
          pointer-events: none;
          opacity: 1;
          z-index: 450;
          }

          .noise:before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: url('https://ice-creme.de/images/background-noise.png');
          pointer-events: none;
          will-change: background-position;
          animation: noise 1s infinite alternate;
          }

          .lines {
          position: fixed;
          left: 0;
          top: 0;
          width: 100vw;
          height: 100vh;
          pointer-events: none;
          z-index: 300;
          opacity: 0.6;
          will-change: opacity;
          animation: opacity 3s linear infinite;
          }

          .lines:before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          pointer-events: none;
          background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
          background-size: 100% 4px;
          will-change: background, background-size;
          animation: scanlines 0.2s linear infinite;
          }

          .main {
          }

          .main .noise:before {
          background-size: 170%;
          }

          .main .vhs {
          position: absolute;
          left: 2rem;
          top: 2rem;
          will-change: text-shadow;
          animation: rgbText 2s steps(9) 0s infinite alternate;
          }

          .main .vhs .char {
          will-change: opacity;
          animation: type 1.2s infinite alternate;
          animation-delay: calc(60ms * var(--char-index));
          }

          .main .time {
          position: absolute;
          right: 2rem;
          top: 2rem;
          will-change: text-shadow;
          animation: rgbText 1s steps(9) 0s infinite alternate;
          }

          .main .glitchtext {
          will-change: text-shadow;
          animation: rgbText 1s steps(9) 0s infinite alternate;
          }

          @keyframes noise {
          0%,
          100% {
          background-position: 0 0;
          }
          10% {
          background-position: -5% -10%;
          }
          20% {
          background-position: -15% 5%;
          }
          30% {
          background-position: 7% -25%;
          }
          40% {
          background-position: 20% 25%;
          }
          50% {
          background-position: -25% 10%;
          }
          60% {
          background-position: 15% 5%;
          }
          70% {
          background-position: 0 15%;
          }
          80% {
          background-position: 25% 35%;
          }
          90% {
          background-position: -10% 10%;
          }
          }

          @keyframes opacity {
          0% {
          opacity: 0.6;
          }
          20% {
          opacity: 0.3;
          }
          35% {
          opacity: 0.5;
          }
          50% {
          opacity: 0.8;
          }
          60% {
          opacity: 0.4;
          }
          80% {
          opacity: 0.7;
          }
          100% {
          opacity: 0.6;
          }
          }

          @keyframes scanlines {
          from {
          background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, .5) 51%);
          background-size: 100% 4px;
          }
          to {
          background: linear-gradient(to bottom, rgba(0, 0, 0, .5) 50%, transparent 51%);
          background-size: 100% 4px;
          }
          }

          @keyframes rgbText {
          0% {
          text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
          }
          25% {
          text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
          }
          45% {
          text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
          }
          50% {
          text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
          }
          55% {
          text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
          }
          90% {
          text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
          }
          100% {
          text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
          }
          }

          @keyframes type {
          0%,
          19% {
          opacity: 0;
          }
          20%,
          100% {
          opacity: 1;
          }
          }
          </style>
          <div class="lines"></div>
          <div class="main">
          <div class="noise"></div>

          <style>
          .rgbtxt {
          animation: rgbText 1s steps(9) 0s infinite alternate;
          animation-name: rgbText;
          animation-iteration-count: infinite;
          animation-timing-function: ease-in-out;
          }

          @keyframes rgbText {
          0% {
          text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
          }
          25% {
          text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 1px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
          }
          45% {
          text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
          }
          50% {
          text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
          }
          55% {
          text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 0px 0 3px rgba(251, 0, 231, 0.8), 0 0px 3px rgba(0, 233, 235, 0.8), 0px 0 3px rgba(0, 242, 14, 0.8), 0 0px 3px rgba(244, 45, 0, 0.8), 0px 0 3px rgba(59, 0, 226, 0.8);
          }
          90% {
          text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), -5px 0 1px rgba(251, 0, 231, 0.8), 0 5px 1px rgba(0, 233, 235, 0.8), 5px 0 1px rgba(0, 242, 14, 0.8), 0 -5px 1px rgba(244, 45, 0, 0.8), 5px 0 1px rgba(59, 0, 226, 0.8);
          }
          100% {
          text-shadow: -1px 1px 8px rgba(255, 255, 255, 0.6), 1px -1px 8px rgba(255, 255, 235, 0.7), 5px 0 1px rgba(251, 0, 231, 0.8), 0 -5px 1px rgba(0, 233, 235, 0.8), -5px 0 1px rgba(0, 242, 14, 0.8), 0 5px 1px rgba(244, 45, 0, 0.8), -5px 0 1px rgba(59, 0, 226, 0.8);
          }
          }

          </style>

          FLOATING IMAGE AT BOTTOM RIGHT <div style="float: ; max-height: 400px; position: fixed; right: 1px; bottom: 9px; z-index: 200;"><img src=""/></div>


4 Kudos

—

Comments

Displaying 0 of 0 comments ( View all | Add Comment )