<template>
  <div class="container">
    InsCode
	</div>
  </template>
  
  <script setup>
  
  </script>
  
  <style scoped>
    * {
			padding: 0;
			margin: 0;
		}

		body {
			height: 100vh;
			background-color: #1d1c1c;
			display: flex;
		}

		.container {
			color: #fff;
			margin: auto;
			font-size: 80px;
			font-weight: bolder;
			position: relative;
		}

		/* 伪类,用于涂抹动画 */
		.container::before {
			content: 'InsCode';
			color: aqua;
			/* 让他们重合 */
			position: absolute;
			left: 0;
			top: 0;
			width: 50px;
			white-space: nowrap;
			overflow: hidden;
			border-right: 5px solid aqua;
			animation: animate 7s linear infinite;
			filter: drop-shadow(0 0 50px #06ee99);
		}

		@keyframes animate {
			0% {
				width: 0;
			}

			100% {
				width: 100%;
			}
		}
</style>
  