css3实现黑客数字雨(复制粘贴可直接运行)

最新推荐文章于 2024-09-09 17:17:23 发布

Dyz_quite

最新推荐文章于 2024-09-09 17:17:23 发布

阅读量589

点赞数

分类专栏：学习分享文章标签： css3 javascript 前端

本文链接：https://blog.csdn.net/Dyz_397/article/details/131084193

版权

学习分享专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该代码片段展示了如何使用HTML、CSS和JavaScript生成一个动态的文字滚动效果。通过JavaScript随机生成文字长度、动画延迟和持续时间，以及CSS实现文字的平移和透明度变化，营造出视觉上的流动感。

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

话不多说上才艺

效果图如下
在这里插入图片描述

复制粘贴可直接运行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="box"></div>
</body>
<script>
  var boxHtml = document.querySelector('.box')
  var str = 'abcdefghojklmnopqrstuvwxyz'
  for (let i = 0; i < 50; i++) {
    let Random = Math.random() * (5 - 1) + 1
    const dom = document.createElement('div')
    let innerText = ''
    for (let index = 0; index < Random; index++) {
      innerText = innerText.concat(str)
    }
    dom.innerText = innerText
    dom.style.animationDelay = `${Math.random() * 2}s`
    dom.style.animationDuration = `${Math.random() * (3 -2) + 2}s`
    dom.style.opacity = 0
    boxHtml.appendChild(dom)
  }
</script>
  <style>
    .box{
      /* display: flex; */
      margin: 0 auto;
      width: 1000px;
      height: 1000px;
      transform-origin:center;
      transform: rotate(90deg);
    }
    .box div{
      width: 100%;
      color: #999;
      animation-name: move;
      animation-iteration-count:infinite;
      animation-direction: normal;
      animation-timing-function: linear;
      margin: 10px 0;
    }
    @keyframes move {
      0% {
        transform: translateX(-100px);
        opacity: 0;
      }
      25%{
        transform: translateX(50px);
        opacity: 0.2;
      }
      50%{
        transform: translateX(200px);
        opacity: 0.5;
      }
      75%{
        transform: translateX(450px);
        opacity: 0.2;
      }
      100%{
        transform: translateX(600px);
        opacity: 0;
      }
    }
    body {
      background: radial-gradient(
        circle at 50%,
        rgb(255, 255, 255),
        rgba(214, 214, 214),
        rgb(97, 97, 97)
      );
    }
  </style>
</html>