打字机效果 html+css+js

效果(最后有源码):

打字机效果 html+css+js_第1张图片

实现:

1. 定义标签,文本将写在span标签里,文本先在js的数组存着:

 <h1>
        <span class="text" >span>
    h1>

2. 定义text基本样式:

.text{
     
            font-family: 'fangsong';
            display: inline-block;
          position: relative;
          font-size: 40px;
          height: 60px;
          line-height: 60px;
          color: rgb(245, 245, 245);
        }

display: inline-block; 行内块元素
position: relative; 相对定位

3. 制作文本最后的小光标:

.text::after{
     
            content: '';
            position: absolute;
            right: -10px;
            top: 5px;
            height: 50px;
            width: 3px;     
            background-color: #fff;
            animation: san 0.5s steps(1) infinite;
        }
        @keyframes san{
     
            0%,100%{
     
                background-color: #fff;
            }
            50%{
     
               background-color: transparent;
            }

        }

position: absolute;
right: -10px;
top: 5px; 绝对定位
animation: san 0.5s steps(1) infinite; 动画;
transparent 透明色

4. js部分,实现效果:

<script>
           <!-- 获取.text标签 -->
        const text = document.querySelector('.text');
         <!-- 定义数组,里面放上文本 -->
        const txt  =["北极光之夜。","夜越黑,星星越亮。","答案在风中飘荡。"]; 
        <!-- 定义当前要显示的字符串的第几个字符 -->
        var index=0;
        <!-- 定义文本数组的下标 -->
        var xiaBiao= 0;
        <!-- 定义huan,拿来判断是要实现打字还是删除字效果,初始为真 -->
        var huan = true;
     <!-- 定义一个定时器,200毫秒执行一次 -->
        setInterval(function(){
     
           <!-- huan为真 -->
            if(huan){
                  
                <!--.text标签添加字符,用.slice方法 --> 
                text.innerHTML = txt[xiaBiao].slice(0,++index);
            }
            else{
     
              <!--.text标签删除字符,用.slice方法 --> 
                text.innerHTML = txt[xiaBiao].slice(0,index--);
            }
            
            <!-- 判断当前index是否为当前字符串长度了+3了 ,+3是为了打完后多等会,多走3个啥也不做的轮回-->
            if(index==txt[xiaBiao].length+3)
            {
     
            <!-- huan变为假,开始执行删除文字效果 -->
                huan = false;
            }
            <!-- 如果删完了 -->
            else if(index<0)
            {
        
            <!-- index=0,huan为真,从头开始打字 -->
                index = 0;
                huan = true;
                <!-- 数组下标加1 -->
                xiaBiao++;
                if(xiaBiao>=txt.length)
                {
        
                <!-- 如果数组下标超过了,又回到0 -->
                    xiaBiao=0; 
                }
            }

        },200)

    </script

JavaScript slice() 方法

完整源码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        *{
      
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
      
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(43, 52, 82);
        }
        .text{
      
            font-family: 'fangsong';
            display: inline-block;
          position: relative;
          font-size: 40px;
          height: 60px;
          line-height: 60px;
          color: rgb(245, 245, 245);
        }
        .text::after{
      
            content: '';
            position: absolute;
            right: -10px;
            top: 5px;
            height: 50px;
            width: 3px;     
            background-color: #fff;
            animation: san 0.5s steps(1) infinite;
        }
        @keyframes san{
      
            0%,100%{
      
                background-color: #fff;
            }
            50%{
      
               background-color: transparent;
            }

        }
    style>
head>
<body>
    <h1>
        <span class="text" >span>
    h1>
    <script>
        const text = document.querySelector('.text');
        const txt  =["北极光之夜。","夜越黑,星星越亮。","答案在风中飘荡。"]; 
        
        var index=0;
        var xiaBiao= 0;
        var huan = true;
     
        setInterval(function(){
      
           
            if(huan){
            
                text.innerHTML = txt[xiaBiao].slice(0,++index);
                console.log(index);
            }
            else{
      
                text.innerHTML = txt[xiaBiao].slice(0,index--);
                console.log(index);
            }

            if(index==txt[xiaBiao].length+3)
            {
      
                huan = false;
            }
            else if(index<0)
            {
      
                index = 0;
                huan = true;
                xiaBiao++;
                if(xiaBiao>=txt.length)
                {
      
                    xiaBiao=0; 
                }
            }

        },200)

    script>
body>
html>

总结:

大家知道有什么新出的游戏好玩吗,想玩点新游戏了。

其它文章:
炫彩流光文字 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结(一)
Sass总结笔记
…等

你可能感兴趣的:(前端,CSS,特效,html,js,css,打字机,源码)