CSS实现打字效果

最新推荐文章于 2023-12-30 23:50:27 发布

易山易酒易诗

最新推荐文章于 2023-12-30 23:50:27 发布

阅读量765

点赞数 2

分类专栏： CSS 文章标签： css css3 javascript

本文链接：https://blog.csdn.net/qq_44675204/article/details/124573434

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

打字效果展示

<template>
  <div class="tube">
    打字效果展示！
  </div>
</template>

<script>
export default {
  mounted() {},
  methods: {},
};
</script>

<style>
body {
  background: none;
  font: bold 100% Helvetica, sans-serif;
}

@keyframes typing {
  from {
    width: 0;
  }
}
@keyframes caret {
  50% {
    border-color: transparent;
  }
}

.tube {
  position: relative;
  left: 10%;
  top: 10%;
  width: 7em;
  height: 1.5em;
  overflow: hidden;
  white-space: nowrap;
  border-right: 1px solid black;
  color: black;
  animation: 3s typing steps(7),
    1s caret steps(1) infinite;
}



</style>