前端打字效果

页面效果链接,点击查看icon-default.png?t=N7T8https://live.youkuaiyun.com/v/419208?spm=1001.2014.3001.5501

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打字机效果</title>
    <style>
        .flex {
            display: flex;
        }

        .flex-1 {
            flex: 1;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <div v-for="(item, index) in clientpreferenceVOListCopy">
            <div class="flex">
                <div>
                    {{ item.type }}
                </div>:
                <div class="flex-1" v-html="item.summary"></div>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                clientpreferenceVOList: [
                    { "type": "意外", "summary": "虽然客户目前为赋闲大众,但生活中总会有意外发生。根据中国保险监督管理委员会的数据,2019年中国交通事故死亡人数约为3.7万人,平均每天有877人因交通事故而丧生。意外风险不仅包括交通事故,还包括家庭意外、职业意外等。考虑到客户目前为单身贵族,可能需要承担更多的家庭责任,因此意外风险不容忽视。购买意外险可以为客户提供意外伤害的保障,确保在意外发生时能够得到及时的经济支持。" },
                    { "type": "医疗", "summary": "客户目前无社保,意味着在医疗方面可能会面临较大的经济压力。根据中国保险监督管理委员会的数据,2019年中国医疗费用总支出约为6.5万亿元,其中个人自付比例约为20%,而客户作为单身贵族,可能需要承担更多的自付费用。医疗风险不仅包括治疗费用,还包括药物费用、检查费用、住院费用等。因此,购买医疗保险对于客户来说至关重要,可以有效减轻因疾病带来的经济负担。" },
                    { "type": "重疾", "summary": "客户目前为36岁-45岁,处于单身贵族阶段,无家庭负担,但关注点为医疗健康。这意味着客户可能面临较高的重疾风险。根据统计数据,中国新发恶性肿瘤的发病数每年都在增加,且发病年龄呈下降趋势,35-44岁组发病人数占全部恶性肿瘤发病人数的40%,且发病与工作压力、生活压力、环境污染、不良生活习惯等密切相关。考虑到客户目前的职业为赋闲大众,生活压力可能较大,因此重疾风险不容忽视。建议客户购买重疾险,以减轻因重疾带来的经济负担,保障自己能够得到及时和有效的治疗。" }
                ],
                clientpreferenceVOListCopy: [],
                index: 0,
                ind: 0,
                timer: null
            },
            mounted() {
                this.typeWriter();
            },
            methods: {
                typeWriter() {
                    const item = this.clientpreferenceVOList[this.ind];
                    let o = { type: item.type, summary: '' };
                    this.clientpreferenceVOListCopy.push(o);
                    console.log('this.clientpreferenceVOListCopy', this.clientpreferenceVOListCopy);
                    this.timer = setInterval(() => {
                        this.dealO();
                    }, 50);
                },
                dealO() {
                    console.log('this.index', this.index, this.clientpreferenceVOList[this.ind].summary.charAt(this.index));
                    if (this.index < this.clientpreferenceVOList[this.ind].summary.length) {
                        // 将当前字符添加到文本元素中
                        this.clientpreferenceVOListCopy[this.ind].summary += this.clientpreferenceVOList[this.ind].summary.charAt(this.index);
                        this.index++;
                    } else {
                        // 设置延迟后继续执行函数
                        clearInterval(this.timer);
                        this.timer = null;
                        this.index = 0;
                        this.ind++;
                        if (this.ind <= 2) {
                            this.typeWriter();
                        }
                    }
                }
            },
            beforeDestroy() {
                // 清除定时器
                clearInterval(this.timer);
                this.timer = null;
            }
        })
    </script>

</body>

</html>

<think>嗯,用户问的是前端打字效果中的图片闪烁。首先,我得先理解什么是打字效果。通常来说,打字效果是指文字出现,模拟打字的过程。但这里提到了图片闪烁,可能是指文字输入的同时,旁边有个光标或者图标在闪烁,比如常见的竖线闪烁效果。或者是图片本身在打字过程中有闪烁的画? 接下来,我需要考虑用户可能的实际需求。用户可能是在开发个网页,想要实现类似终端或命令行界面中的效果文字逐个出现,同时有个闪烁的光标。而图片闪烁可能是指这个光标用图片代替,比如个自定义的光标图标,或者是在文字旁边有态变化的图片,随着打字过程闪烁。 然后,我需要分解实现步骤。通常打字效果会用到CSS画和JavaScript。比如,用JavaScript控制文字逐个显示,同时用CSS的@keyframes实现光标的闪烁。如果用户指的是用图片作为光标,可能需要将传统的竖线替换成图片,并设置同样的闪烁画。 可能会遇到哪些问题呢?比如,图片的大小、位置调整,确保它紧跟在文字后面。另外,CSS画的流畅性,可能需要调整关键帧的时间间隔。还有,如果用户想要图片和文字同步变化,比如每打,图片切换次,这时候可能需要更复杂的JavaScript控制,或者使用雪碧图配合CSS画。 还需要考虑兼容性和性能问题。使用CSS画通常性能较好,但某些老浏览器可能不支持。图片的加载是否会影响画的流畅,比如图片过大导致闪烁不连贯。此外,如果用户想要不同的闪烁效果,比如旋转、缩放等,可能需要调整画的关键帧。 可能用户没有明确说明的是,具体想要什么样的图片闪烁效果。比如,是静态图片的显示隐藏,还是态的变换。这时候可能需要进步询问,但根据问题描述,用户可能希望有个基本的实现方法,然后自行调整。 总结回答的结构应该是:先介绍打字效果的基本实现,然后分步骤说明如何加入图片闪烁,包括HTML结构、CSS画和JavaScript控制。最后给出注意事项和扩展可能性。</think>前端实现“打字效果+图片闪烁”通常指模拟文字输出,并配合光标或图标闪烁的效果。以下是分步实现思路和关键代码示例: 、基础打字效果实现 1. HTML结构 ```html <div class="typewriter"> <span id="text"></span> <img src="cursor.png" class="blink-cursor"> </div> ``` 2. CSS闪烁画 ```css .blink-cursor { animation: blink 1s infinite; width: 20px; /* 根据图片尺寸调整 */ height: 24px; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } ``` 3. JavaScript控制逐输出 ```javascript function typeWriter(text, elementId, speed = 100) { let i = 0; const target = document.getElementById(elementId); function type() { if (i < text.length) { target.innerHTML += text.charAt(i); i++; setTimeout(type, speed); } } type(); } // 调用示例 typeWriter("欢迎访问我的网站!", "text", 150); ``` 二、图片闪烁增强方案 1. 态光标控制 ```javascript // 在打字完成后停止闪烁 function typeWriter(...) { // ...原有代码 if (i === text.length) { document.querySelector('.blink-cursor').style.animation = 'none'; } } ``` 2. 复合效果(缩放+旋转) ```css .blink-cursor { animation: blink 1s infinite, pulse 2s ease-in-out infinite; } @keyframes pulse { 0% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.2) rotate(10deg); } 100% { transform: scale(1) rotate(0deg); } } ``` 三、注意事项 1. 性能优化 - 使用`will-change: transform;`提升画性能 - 对闪烁图片进行预加载 - 使用`requestAnimationFrame`优化定时器 2. 移端适配 ```css @media (max-width: 768px) { .blink-cursor { width: 15px; height: 18px; } } ``` 3. 扩展方案 - 使用SVG实现矢量光标 - 结合WebGL实现粒子特 - 添加音同步(按键声) 四、完整示例组合 ```html <style> .typewriter { display: flex; align-items: center; font-family: monospace; } .blink-cursor { animation: blink 1s steps(2) infinite, glow 1.5s ease-in-out infinite; } @keyframes glow { 0%, 100% { filter: drop-shadow(0 0 2px #00ff00); } 50% { filter: drop-shadow(0 0 5px #00ff00); } } </style>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值