Navigation

    Cyberian
    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Pro Blog
    • Users
    • Groups
    • Unsolved
    • Solved
    1. Home
    2. Leader Leader
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 1
    • Best 0
    • Groups 0

    Leader Leader

    @Leader Leader

    0
    Reputation
    1
    Profile views
    1
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    Leader Leader Unfollow Follow

    Latest posts made by Leader Leader

    • How to make this illumination effect with CSS

      simulate a “scan” light that will reveal words in a box, this is my code by now:

      const e = document.getElementsByClassName('scan')[0];
      document.onmousemove = function(event){
        e.style.left = `${event.clientX}px`;
      };
      
      *{
          margin: 0;
          padding: 0;
      }
      
      html, body{
          width: 100%;
          min-height: 100vh;
          overflow-x: hidden;
          
          display: flex;
      }
      
      .banner{
          width: 100vw;
          height: 100vh;
      
          display: flex;
          flex-grow: 1;
          flex-direction: row;
          align-items: center;
          background-color: #031321;
      }
      
      .banner .scan{
          width: 7px;
          height: 80%;
          
          position: absolute;
          left: 30px;
          z-index: 3;
      
          transition: left 50ms ease-out 0s;
          
          border-radius: 15px;
          background-color: #fff;
          box-shadow:
              0 0 15px 5px #fff,  /* inner white */
              0 0 35px 15px #008cff, /* inner blue */
              0 0 350px 20px #0ff; /* outer cyan */
      }
      
      .banner .description{
          width: 100%;
          color: white;
          font-size: 3em;
          text-align: center;
      
          -webkit-user-select: none;
          -ms-user-select: none;
          user-select: none;
      }
      
      <div class="banner">
          <div class="scan"></div>
          <div class="description">
              Just trying something
          </div>
      </div>
      

      1.mp4

      posted in Web Designing
      Leader Leader
      Leader Leader