css文字切换动画

最新推荐文章于 2023-03-16 21:30:00 发布
最新推荐文章于 2023-03-16 21:30:00 发布
阅读量1.1k 收藏
点赞数
分类专栏： html_css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45849330/article/details/106478431
版权

1、html模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="./home.css">
    <style>
       
    </style>
</head>
<body>
  <div class="wrapper">
    <div class="letters">
      <span class="letter">1</span>
      <span class="letter">0</span>
      <span class="letter">0</span>
      <span class="letter">0</span>
      <span class="letter">S</span>
      <span class="letter">U</span>
      <span class="letter">C</span>
      <span class="letter">A</span>
      <span class="letter">I</span>
      <span class="letter">H</span>
      <span class="letter">O</span>
      <span class="letter">U</span>
      <span class="letter">.</span>
      <span class="letter">C</span>
      <span class="letter">O</span>
      <span class="letter">M</span>

    </div>

  </div>

    
</body>
</html>

2、链接的css

body {
    text-align: center;
    background-color: #1d1f20;
  }
  
  .wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    font-size: 0;
    -webkit-transform: translate(-50%);
            transform: translate(-50%);
  }
  
  p {
    font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #eee;
    opacity: 0.3;
  }
  
  .letter {
    width: 24px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    margin: 0 0;
    font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 24px;
    text-transform: uppercase;
    color: #eee;
  }
  .letter:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    word-break: break-all;
    background-color: #1d1f20;
  }
  
  
  .letter:nth-child(1):before {
    content: "4792036815";
    margin-top: -48px;
    -webkit-animation-name: letter1;
            animation-name: letter1;
    -webkit-animation-duration: 0.13333s;
            animation-duration: 0.13333s;
    -webkit-animation-delay: 0.95s;
            animation-delay: 0.95s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes letter1 {
    from {
      margin-top: -48px;
    }
    to {
      margin-top: 24px;
    }
  }
  
  @keyframes letter1 {
    from {
      margin-top: -48px;
    }
    to {
      margin-top: 24px;
    }
  }
  .letter:nth-child(2):before {
    content: "0295176384";
    margin-top: -96px;
    -webkit-animation-name: letter2;
            animation-name: letter2;
    -webkit-animation-duration: 2.56s;
            animation-duration: 2.56s;
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes letter2 {
    from {
      margin-top: -96px;
    }
    to {
      margin-top: 24px;
    }
  }
  
  @keyframes letter2 {
    from {
      margin-top: -96px;
    }
    to {
      margin-top: 24px;
    }
  }
  .letter:nth-child(3):before {
    content: "8562143079";
    margin-top: -168px;
    -webkit-animation-name: letter3;
            animation-name: letter3;
    -webkit-animation-duration: 1.82s;
            animation-duration: 1.82s;
    -webkit-animation-delay: 0.48s;
            animation-delay: 0.48s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes letter3 {
    from {
      margin-top: -168px;
    }
    to {
      margin-top: 24px;
    }
  }
  
  @keyframes letter3 {
    from {
      margin-top: -168px;
    }
    to {
      margin-top: 24px;
    }
  }
  .letter:nth-child(4):before {
    content: "2471958306";
    margin-top: -24px;
    -webkit-animation-name: letter4;
            animation-name: letter4;
    -webkit-animation-duration: 0.96s;
            animation-duration: 0.96s;
    -webkit-animation-delay: 0.52s;
            animation-delay: 0.52s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes letter4 {
    from {
      margin-top: -24px;
    }
    to {
      margin-top: 24px;
    }
  }
  
  @keyframes letter4 {
    from {
      margin-top: -24px;
    }
    to {
      margin-top: 24px;
    }
  }
  .letter:nth-child(5):before {
    content: "2360451897";
    margin-top: -120px;
    -webkit-animation-name: letter5;
            animation-name: letter5;
    -webkit-animation-duration: 0.2s;
            animation-duration: 0.2s;
    -webkit-animation-delay: 0.94s;
            animation-delay: 0.94s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes letter5 {
    from {
      margin-top: -120px;
    }
    to {
      margin-top: 24px;
    }
  }
  
  @keyframes letter5 {
    from {
      margin-top: -120px;
    }
    to {
      margin-top: 24px;
    }
  }
  .letter:nth-child(6):before {
    content: "4851906723";
    margin-top: -216px;
    -webkit-animation-name: letter6;
            animation-name: letter6;
    -webkit-animation-duration: 2.88s;
            animation-duration: 2.88s;
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes letter6 {
    from {
      margin-top: -216px;
    }
    to {
      margin-top: 24px;
    }
  }
  
  @keyframes letter6 {
    from {
      margin-top: -216px;
    }
    to {
      margin-top: 24px;
    }
  }
  .letter:nth-child(7):before {
    content: "2156074938";
    margin-top: -96px;
    -webkit-animation-name: letter7;
            animation-name: letter7;
    -webkit-animation-duration: 2.208s;
            animation-duration: 2.208s;
    -webkit-animation-delay: 0.31s;
            animation-delay: 0.31s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes letter7 {
    from {
      margin-top: -96px;
    }
    to {
      margin-top: 24px;
    }
  }
  
  @keyframes letter7 {
    from {
      margin-top: -96px;
    }
    to {
      margin-top: 24px;
    }
  }
  .letter:nth-child(8):before {
    content: "1867954302";
    margin-top: -216px;
    -webkit-animation-name: letter8;
            animation-name: letter8;
    -webkit-animation-duration: 2.268s;
            animation-duration: 2.268s;
    -webkit-animation-delay: 0.37s;
            animation-delay: 0.37s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes letter8 {
    from {
      margin-top: -216px;
    }
    to {
      margin-top: 24px;
    }
  }
  
  @keyframes letter8 {
    from {
      margin-top: -216px;
    }
    to {
      margin-top: 24px;
    }
  }
  .letter:nth-child(9):before {
    content: "1452798306";
    margin-top: -72px;
    -webkit-animation-name: letter9;
            animation-name: letter9;
    -webkit-animation-duration: 1.65s;
            animation-duration: 1.65s;
    -webkit-animation-delay: 0.45s;
            animation-delay: 0.45s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes letter9 {
    from {
      margin-top: -72px;
    }
    to {
      margin-top: 24px;
    }
  }
  
  @keyframes letter9 {
    from {
      margin-top: -72px;
    }
    to {
      margin-top: 24px;
    }
  }
  .letter:nth-child(10):before {
    content: "5012438697";
    margin-top: -216px;
    -webkit-animation-name: letter10;
            animation-name: letter10;
    -webkit-animation-duration: 1.908s;
            animation-duration: 1.908s;
    -webkit-animation-delay: 0.47s;
            animation-delay: 0.47s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes letter10 {
    from {
      margin-top: -216px;
    }
    to {
      margin-top: 24px;
    }
  }
  
  @keyframes letter10 {
    from {
      margin-top: -216px;
    }
    to {
      margin-top: 24px;
    }
  }
  .letter:nth-child(11):before {
    content: "6027195483";
    margin-top: -96px;
    -webkit-animation-name: letter11;
            animation-name: letter11;
    -webkit-animation-duration: 3.04s;
            animation-duration: 3.04s;
    -webkit-animation-delay: 0.05s;
            animation-delay: 0.05s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes letter11 {
    from {
      margin-top: -96px;
    }
    to {
      margin-top: 24px;
    }
  }
  
  @keyframes letter11 {
    from {
      margin-top: -96px;
    }
    to {
      margin-top: 24px;
    }
  }
  .letter:nth-child(12):before {
    content: "4692731805";
    margin-top: -168px;
    -webkit-animation-name: letter12;
            animation-name: letter12;
    -webkit-animation-duration: 3.36s;
            animation-duration: 3.36s;
    -webkit-animation-delay: 0.04s;
            animation-delay: 0.04s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes letter12 {
    from {
      margin-top: -168px;
    }
    to {
      margin-top: 24px;
    }
  }
  
  @keyframes letter12 {
    from {
      margin-top: -168px;
    }
    to {
      margin-top: 24px;
    }
  }
  .letter:nth-child(13):before {
    content: "4738259106";
    margin-top: -48px;
    -webkit-animation-name: letter13;
            animation-name: letter13;
    -webkit-animation-duration: 0.29333s;
            animation-duration: 0.29333s;
    -webkit-animation-delay: 0.89s;
            animation-delay: 0.89s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes letter13 {
    from {
      margin-top: -48px;
    }
    to {
      margin-top: 24px;
    }
  }
  
  @keyframes letter13 {
    from {
      margin-top: -48px;
    }
    to {
      margin-top: 24px;
    }
  }
  .letter:nth-child(14):before {
    content: "7018456293";
    margin-top: -216px;
    -webkit-animation-name: letter14;
            animation-name: letter14;
    -webkit-animation-duration: 0.612s;
            animation-duration: 0.612s;
    -webkit-animation-delay: 0.83s;
            animation-delay: 0.83s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes letter14 {
    from {
      margin-top: -216px;
    }
    to {
      margin-top: 24px;
    }
  }
  
  @keyframes letter14 {
    from {
      margin-top: -216px;
    }
    to {
      margin-top: 24px;
    }
  }
  .letter:nth-child(15):before {
    content: "5764318209";
    margin-top: -96px;
    -webkit-animation-name: letter15;
            animation-name: letter15;
    -webkit-animation-duration: 2.08s;
            animation-duration: 2.08s;
    -webkit-animation-delay: 0.35s;
            animation-delay: 0.35s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes letter15 {
    from {
      margin-top: -96px;
    }
    to {
      margin-top: 24px;
    }
  }
  
  @keyframes letter15 {
    from {
      margin-top: -96px;
    }
    to {
      margin-top: 24px;
    }
  }
  .letter:nth-child(16):before {
    content: "8730149265";
    margin-top: -120px;
    -webkit-animation-name: letter16;
            animation-name: letter16;
    -webkit-animation-duration: 1.7s;
            animation-duration: 1.7s;
    -webkit-animation-delay: 0.49s;
            animation-delay: 0.49s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
  }
  
  @-webkit-keyframes letter16 {
    from {
      margin-top: -120px;
    }
    to {
      margin-top: 24px;
    }
  }
  
  @keyframes letter16 {
    from {
      margin-top: -120px;
    }
    to {
      margin-top: 24px;
    }
  }
You are my sunshine....
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS3常用动画效果合集（最全），看看这篇文章吧
03-31 397
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】我特地针对初学者整理一套前端学习资料。
纯CSS实现同一位置文字内容的渐变（文字不停替换）
qq_43742571的博客
12-05 607
先上效果图 原句子 开始变换 新句子 说一下思路 使用绝对定位使句子都重叠在一个地方，然后用css控制透明度动画便可实现句子的消失和出现 动画为（出现，展示，消失，保持透明） 假设一个句子的消失时间为x,存在时间为y， 则第二个句子延迟（x+y）秒 第三个句子延迟2（x+y）秒 最后一个句子执行完（出现，展示）的动画后，第一次全句子展示全部做完 全部过程为n(x+y)秒 如下，透明度变化时间为1s,展示时间为1.5s; 下面展示代码 !DOCTYPE html> <html lang="e
纯css3 animation属性制作旋转文字动画切换效果
11-23
纯css3 animation属性制作旋转文字动画切换效果
纯css 鼠标经过显示动画 替换文字内容
freejs
09-04 400
纯css 鼠标经过显示动画 替换文字内容   演示     XML/HTML Code &lt;ul class="readers-list"&gt;   &lt;li&gt;&lt;a href="http://www.freejs.net" target="_blank"&gt;&lt;img alt="jQuery Plugins" src=
CSS3发光文字字体切换特效
weixin_53666393的博客
03-11 187
CSS3发光文字字体切换特效
css 字体怎么动画,CSS文字动画
weixin_35740588的博客
08-04 462
html {height:100%;}body {height:100%;display:flex;justify-content:center;align-items:center;background:rgb(196,14,14);margin:0 auto;}main {width:400px;height:230px;border:10px solid white;position:rel...
js+css3文字上下滚动切换动画特效
06-11
一款简单的js+css3文字上下滚动切换动画特效，可设置多种不同颜色的文字。
纯css3鼠标悬停图片文字切换动画特效
11-24
纯css3鼠标悬停图片文字切换动画特效
css3鼠标悬停按钮弹性文字切换动画特效
06-11
基于css3 transform属性制作的鼠标悬停按钮弹性文字切换动画特效，同时按钮背景与文字也会变色。
jquery css3文字动画特效点击切换文字动态效果
11-23
jquery css3文字动画特效点击切换文字动态效果
纯CSS3动态文字展示切换特效.zip
07-04
脚本简介纯CSS3动态文字展示切换特效是一款个性的文字拼凑动画切换特效下载。
纯CSS3动态文字展示切换特效
06-24
纯CSS3动态文字展示切换特效是一款个性的文字拼凑动画切换特效下载。
css3文字上下滚动切换特效
weixin_53666393的博客
03-16 626
css3文字上下滚动切换特效
CSS 炫酷文本过渡动画
南城
05-18 1237
今天分享一个炫酷的文本过渡动画效果，如下面GIF所示，曾经是否有见过这种动画呢，想想是不是感觉挺复杂呢，通常这个过渡效果通过较为复杂的可用WebGl实现，本文通过另一种方式实现，文章尾部有神奇的代码，快来瞧瞧看吧～ 代码实现 文字不断的在切换，确定的是有一个包含纯文字的数组，在此我们定义如下的html代码，后面通过交替显示其中一个span标签来达到动画的效果。 <divid="container"> <spanid="text1"></span> ...
css文本切换js特效模糊效果
ICode联盟
08-15 114
css文本切换特效模糊效果，类似电影文字字幕切换效果。
css3基础-文本与字体+转换+过渡+动画+案例
web前端开发教程htmlcssjs
01-02 696
Css3本与字体 文本阴影 h1 { text-shadow: 5px 5px 5px red; } word-break换行： h1:nth-child(1) { word-break: normal; } /*英文：一行放不下时整个单词换行*/ h1:nth-child(2) { word-break: break-all; } /*英文：一行放不下时把单词拆开换行*/ h1:nt...
CSS3文字交替展示动画js特效
ICode联盟
02-08 373
下载地址 CSS3文字交替展示动画特效是一款基于css3 keyframes属性绘制的全屏文字放大缩小黑白背景交替切换特效。 dd:
纯 css 3 动画实例tab 背景切换的动态效果
最新发布
09-17
Tab背景切换的动态效果是一种常见的纯CSS3动画实例，可以通过使用CSS3的属性和过渡效果来实现。 首先，HTML结构中需要有切换的Tab标签和对应的内容区域。可以使用无序列表（`<ul>`）来创建Tab标签，每个标签使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值