css文字连续光影特效

枫斗.

于 2024-03-30 18:38:44 发布

阅读量209

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_74205854/article/details/137179538

版权

CSS 文字连续光影特效教程

在本教程中，我们将学习如何使用 CSS 创建一个令人印象深刻的文字连续光影特效。

介绍

CSS（层叠样式表）是一种用于描述网页内容显示样式的标记语言。通过 CSS，我们可以控制网页中各种元素的布局、样式和表现效果，从而实现丰富多彩的网页设计。文字连续光影特效是 CSS 中的一

步骤 1: 新建 HTML 文件

首先，我们需要创建一个 HTML 文件，并添加基本的结构和样式。

步骤 1: 新建 HTML 文件
首先，我们需要创建一个 HTML 文件，并添加基本的结构和样式。

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Continuous Shadow Effect Tutorial</title>
<style lang="scss"> 注意下文书写的代码为scss
  span{
      color: #faf8d7;
    // 动画效果 动画时长为 1 秒，循环播放，缓动效果为 ease-in-out，并且交替反向播放
     animation: titleColorhange 1s infinite ease-in-out alternate;
    }
 /* 定义标题进行变化的动画 */
  @keyframes titleColorhange {
    to {color: #7802ff;}
  }
 /* 循环进行生成动画 */
  @for $i from 1 through 3 {
    a[href^="/filmClassify?Pid="]{
      span:nth-child(#{$i}){
        /* span 元素的动画延迟时间，根据循环变量 $i 的值而变化，
        第一个 span 元素延迟 0.2 秒，第二个延迟 0.4 秒，第三个延迟 0.6 秒。 */
        animation-delay: $i*0.3s;
      }
    }
  }
</style>
</head>
<body>

 <div>
    <span>C</span>
    <span>S</span>
    <span>D</span>
    <span>D</span>
</div>

</body>
</html>