纯CSS实现同一位置文字内容的渐变（文字不停替换）

最新推荐文章于 2023-03-16 21:30:00 发布

安徽南柱赫

最新推荐文章于 2023-03-16 21:30:00 发布

阅读量610

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_43742571/article/details/110693051

版权

先上效果图原句子开始变换新句子说一下思路使用绝对定位使句子都重叠在一个地方，然后用css控制透明度动画便可实现句子的消失和出现动画为（出现，展示，消失，保持透明）假设一个句子的消失时间为x,存在时间为y，则第二个句子延迟（x+y）秒第三个句子延迟2（x+y）秒最后一个句子执行完（出现，展示）的动画后，第一次全句子展示全部做完全部过程为n(x+y)秒如下，透明度变化时间为1s,展示时间为1.5s;下面展示代码!DOCTYPE html><html lang="e

摘要由CSDN通过智能技术生成

先上效果图在这里插入图片描述
原句子

开始变换

新句子

说一下思路
使用绝对定位使句子都重叠在一个地方，然后用css控制透明度动画便可实现句子的消失和出现
动画为（出现，展示，消失，保持透明）

假设一个句子的消失时间为x,存在时间为y，
则第二个句子延迟（x+y）秒
第三个句子延迟2（x+y）秒
最后一个句子执行完（出现，展示）的动画后，第一次全句子展示全部做完
全部过程为n(x+y)秒

如下，透明度变化时间为1s,展示时间为1.5s;
下面展示代码

!DOCTYPE html>

<html lang="en" >
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .box1 {
    
            width: 100vh;
            height: 40vh

最低0.47元/天解锁文章

安徽南柱赫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
纯CSS实现同一位置文字内容的渐变（文字不停替换）

先上效果图原句子开始变换新句子说一下思路使用绝对定位使句子都重叠在一个地方，然后用css控制透明度动画便可实现句子的消失和出现动画为（出现，展示，消失，保持透明）假设一个句子的消失时间为x,存在时间为y，则第二个句子延迟（x+y）秒第三个句子延迟2（x+y）秒最后一个句子执行完（出现，展示）的动画后，第一次全句子展示全部做完全部过程为n(x+y)秒如下，透明度变化时间为1s,展示时间为1.5s;下面展示代码!DOCTYPE html><html lang="e
复制链接

扫一扫