1

我正在尝试在“容器”/语音气泡内创建打字机效果动画。出于演示目的，我在文本中进行了硬编码，但在我的最终代码中，它被分配给一个 ID，该 ID 通过来自 SQL 表的 Javascript 填充。正如你所看到的，我有几个问题 1. 我在左侧失去了我的语音/引用效果，2. 在 CSS 中使用换行可以显示我的所有文本，但绝对令人眼花缭乱，如果我使用 nowrap 它不会显示全文。我对此进行了很多研究，并尝试使用 span 和 nth-child，虽然这对我的 ID 值是不可行的，因为它会根据 SQL 表中的数据动态变化。

<!DOCTYPE html>
<head>
<meta http-equiv="refresh" content="20">
</head>
<html>
    <body>
    <div>
        <h1 class="h1">Arrears Support Unit</h1>
        <h2 class="h2">This is just a test</h2>
    </div>
    <div id="slide">
        <img src="Want_You.png" align="middle" style="max-width:100%;max-height:75%;">
    </div>
    <div class="comments">
        <p class="comment bubble typewriter-text">Lorum ipsum et est... Lorum ipsum et est... Lorum ipsum et est... Lorum ipsum et est... Lorum ipsum et est... Lorum ipsum et est...</p>
    </div>
    <div class="comments">
        <p class="comment bubble typewriter-text">Lorum ipsum et est... Lorum ipsum et est... Lorum ipsum et est...</p>
    </div>
    </body>
</html>


<style>

    #Heading {  
        margin-bottom:0vh;
        margin-top:0vh;
    }
    #slide {
        position: relative;
        margin: 1vh;
        float: right;
        border: solid 1px black;
    }
    .h1 {
        font-family: calibri;
        font-style: normal; 
        margin-top:0vh;     
        margin-bottom:0vh;  
        font-size: 7vh;
    }
    .h2 {
        font-family: calibri;
        font-style: normal;
        font-size: 4vh;
        margin-top: 0vh;
        margin-bottom: 0vh;
    }
    .p {
        font-family: calibri;
        font-style: normal;
        font-size: 4vh;
        margin-top: 0vh;
        margin-bottom: 0vh;
    }
    .comments {
        font-family: calibri;
        margin-top: 1vh;    
        font-size: 4vh;
        width: 400px;
    }
    .comments .comment {
        font-family: calibri;
        margin-top:0vh;
        margin-left: 1.5vw;
        margin-bottom: 20px;
        font-size: 5vh;
    }
    .comments .comment p {
        margin: 0 0 10px 10px;  
    }
    .bubble {
        position: relative;
        background: rgb(27,29,81);
        padding: 20px;
        color: white;
        border-radius: 2px;
        margin-left: 20px;
        width: 1175px;
    }
    .bubble::after {
        content: "";
        display: block;
        position: absolute;
        left: -15px;
        top: 15px;
        width:0;
        height:0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 15px solid rgb(27,29,81);
    }
    .typewriter-text {
        display: inline-block;
        overflow: hidden;
        letter-spacing: 2px;
        white-space: wrap;
        border-right: 4px solid orange;
        box-sizing: border-box;
        -webkit-animation: type 5s steps(50, end), blink .75s step-end infinite;
        animation: type 5s steps(50, end);
    }
    @keyframes typing {
        from { 
            width: 0% 
        }
        to { 
            width: 100% 
        }
    }
    @keyframes blink {
        from, to { 
            border-color: transparent 
        }
        50% { 
            border-color: orange; 
        }
    }
    @-webkit-keyframes type {
        from { width: 0; }
    }
</style>
4

0 回答 0