typewriter-effect

HoverMe

Hover Me

<script setup lang="ts"></script>

<template>
  <div class="hover-me">
    <div class="wrapper">
      <h1>Hover Me</h1>
    </div>
  </div>
</template>

<style scoped lang="scss">
.hover-me {
  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  h1 {
    cursor: pointer;
    position: relative;
  }

  h1::before {
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    block-size: 100%;
    background: hsl(200 100% 80%);
    z-index: -1;
    transition: transform 0.3s ease;
    transform: scaleX(0);
    transform-origin: right;
  }

  h1:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }
}
</style>

Typing

Hello World!

<script setup lang="ts"></script>

<template>
  <div class="typing">
    <div class="hello-world">Hello World!</div>
  </div>
</template>

<style scoped lang="scss">
.typing {
  .hello-world {
    box-sizing: content-box;
    width: 12ch;
    overflow: hidden;
    white-space: nowrap;
    animation: typing 4s steps(12), blink 0.5s step-end infinite alternate;
    border-right: 5px solid black;
    font-family: monospace;
    font-size: 2em;
  }
  @keyframes typing {
    from {
      width: 0;
    }
  }
  @keyframes blink {
    50% {
      border-color: transparent;
    }
  }
}
</style>

HoverUnderline

这是一段很长的文本 很长 很长 很长~~~~~~这是一段很长的文本 很长 很长 很长~~~~~~这是一段很长的文本 很长 很长 很长~~~~~~这是一段很长的文本 很长 很长 很长~~~~~~

<script setup lang="ts"></script>

<template>
  <div class="hover-underline">
    <h1 class="title">
      <span>
        这是一段很长的文本 很长 很长 很长~~~~~~这是一段很长的文本 很长 很长 很长~~~~~~这是一段很长的文本 很长 很长 很长~~~~~~这是一段很长的文本 很长 很长 很长~~~~~~
      </span>
    </h1>
  </div>
</template>

<style scoped lang="scss">
.hover-underline {
  .title {
    color: #333;
    line-height: 2;

    span {
      background: linear-gradient(to right, #83a4d4, #b6fbff) right bottom no-repeat;
      background-size: 0 6px;
      transition: background-size 1300ms;
    }

    &:hover span {
      transition: background-size 0ms;
      background-size: 100% 6px;
    }
  }
}
</style>