每日CSS_发光文本效果

2020_12_22

源码

1. 代码解析

1.1 html 代码片段

<h1>

  <span>今</span>

  <span>天</span>

  <span>你</span>

  <span>开</span>

  <span>心</span>

  <span>吗</span>

</h1>

在里面定义6个字, 分别用不同的 span 表示, 供单个使用

1.2 css 代码片段

  1. 首先对 body 进行初始化
body{

  margin: 0;

  padding: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  background: #000;

  font-family: 幼圆, cursive;

}

​ 在 body 中设置布局方式为 flex, 将内容居中显示, 设置高度为 100%, 宽度为 auto , 自然为 100%, 背景设为黑色.

  1. 初始化字体颜色及大小
h1{

  margin: 0;

  padding: 0;

  color: #111;

  font-size: 10em;

}

​ 设置字体颜色为 #111, 效果如下

  1. 设置动画和字体摆放方式
h1 span{

  display: table-cell;

  margin: 0;

  padding: 0;

  animation: animate 2s linear infinite;

}

​ 设置了摆放方式是 table-cell , 字体更加紧密并且间距相同, 设置动画, 线性无限放.

  1. 动画设置
@keyframes animate {

  0%, 100%{

    color: #ffffff;

    filter: blur(2px);

    text-shadow: 0 0 10px #5655ff,

                0 0 20px #5655ff,

                0 0 40px #5655ff,

                0 0 80px #5655ff,

                0 0 120px #5655ff,

                0 0 200px #5655ff,

                0 0 300px #5655ff,

                0 0 400px #5655ff;

  }

  5%, 95%{

    color: #111;

    filter: blur(0px);

    text-shadow: none;

  }

}

​ 设置动画, 每个字体的变化方式是从白色到暗黑再到白色, 使用 blur 实现了模糊效果, 效果如下

  1. 轮流开始播放动画
h1 span{

  display: table-cell;

  margin: 0;

  padding: 0;

  animation: animate 2s linear infinite;

}

h1 span:nth-child(1){

  animation-delay: 0s;

}

h1 span:nth-child(2){

  animation-delay: 0.25s;

}

h1 span:nth-child(3){

  animation-delay: 0.5s;

}

h1 span:nth-child(4){

  animation-delay: 0.75s;

}

h1 span:nth-child(5){

  animation-delay: 1s;

}

h1 span:nth-child(6){

  animation-delay: 1.25s;

}

​ 共6个字, 每个字拥有一定的延时, 从第一个一直到最后一个, 每个字体显示时间是 0.25s

2. 源码

2.1 html 代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <link rel="stylesheet" href="2020_12_22.css">

</head>

<body>

<h1>

  <span>今</span>

  <span>天</span>

  <span>你</span>

  <span>开</span>

  <span>心</span>

  <span>吗</span>

</h1>

</body>

</html>

2.2 css 代码

body{

  margin: 0;

  padding: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  background: #000;

  font-family: 幼圆, cursive;

}

h1{

  margin: 0;

  padding: 0;

  color: #111;

  font-size: 10em;

}

h1 span{

  display: table-cell;

  margin: 0;

  padding: 0;

  animation: animate 2s linear infinite;

}

h1 span:nth-child(1){

  animation-delay: 0s;

}

h1 span:nth-child(2){

  animation-delay: 0.25s;

}

h1 span:nth-child(3){

  animation-delay: 0.5s;

}

h1 span:nth-child(4){

  animation-delay: 0.75s;

}

h1 span:nth-child(5){

  animation-delay: 1s;

}

h1 span:nth-child(6){

  animation-delay: 1.25s;

}

@keyframes animate {

  0%, 100%{

    color: #ffffff;

    filter: blur(2px);

    text-shadow: 0 0 10px #5655ff,

                0 0 20px #5655ff,

                0 0 40px #5655ff,

                0 0 80px #5655ff,

                0 0 120px #5655ff,

                0 0 200px #5655ff,

                0 0 300px #5655ff,

                0 0 400px #5655ff;

  }

  5%, 95%{

    color: #111;

    filter: blur(0px);

    text-shadow: none;

  }

}

每日CSS_发光文本效果的更多相关文章

  1. 每日CSS_实时时钟效果

    每日CSS_实时时钟效果 2020_12_22 源码链接 1. 代码解析 1.1 html 代码片段 <div class="clock"> <div class ...

  2. 每日CSS_霓虹灯按钮悬停效果

    每日CSS_霓虹灯按钮悬停效果 2020_12_20 1. 代码解析 1.1 html 代码片段解析 <a href="#"> <span></spa ...

  3. 每日CSS_滚动页面动画效果

    每日CSS_滚动页面动画效果 2021_1_13 源码链接 1. 代码解析 1.1 html 代码片段 <section> <h2>开 始 滑 动</h2> < ...

  4. CSS文本效果

    前面的话 本文将详细介绍CSS文本效果 凸版印刷效果 这种效果尤其适用于中等亮度背景配上深色文字的场景:但它也可用于深色底.浅色字的场景,只要文字不是黑色并且背景不是纯黑或纯白就行 [浅色背景深色文本 ...

  5. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  6. CSS 3学习——文本效果和@font-face

    文本效果 关于文本效果,这里仅仅记录得到大多数浏览器支持的几个属性,分别是: text-overflow text-shadow word-break word-wrap text-overflow ...

  7. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  8. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  9. 第 21 章 CSS3 文本效果

    学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一．文本阴影 ...

随机推荐

  1. FL studio系列教程（九）：FL Studio中如何排列编曲

    在FL Studio水果音乐制作软件播放列表中可以对制作的样本进行编排,除此之外,播放列表中排列的对象被叫做剪辑.在其中可以排列以下剪辑. 1.样本剪辑:样本剪辑包含了编排好的插件乐器音符数据. 2. ...

  2. img元素的联用

    img元素的常用属性: src属性:资源地址 alt属性:当图片资源失效时,将出现该属性的设置的文字 最简单的联动: 和a元素联用(直接用a标签套) <a href="https:// ...

  3. sublime text3配置javascript运行环境

    步骤一 安装node.js 官网下载链接:node.js 步骤二 Sublime 依次点击 菜单栏 Tools => Build System => New Build System 步骤 ...

  4. C语言讲义——内联函数

    如果一些函数被频繁调用,不断地有函数入栈(Stack),会造成栈空间的大量消耗. 对应这种问题,可以使用内联函数(inline). 编译器会将内联函数的代码整段插入到调用的位置. #include & ...

  5. day4(JWT安装配置)

    1.JWT安装配置  1.1安装JWT pip install djangorestframework-jwt==1.11.0 1.2 syl/settings.py配置jwt载荷中的有效期设 # j ...

  6. Core在IIS的热发布问题或者报错文件已在另一个程序中打开

    关于Core发布到IIS的热发布问题,或者覆盖dll文件的时候会报错"文件已在另一个程序中打开",也就是无法覆盖程序的问题,经过百度和分析总结以下几种方案: 一.使用app_off ...

  7. bert实践

    github参考:https://github.com/wangjiwu/BERT-sentiment--classification 一.准备数据 bert官方与训练数据下载 自己的数据集,(训练集 ...

  8. 第 5 篇 Scrum 冲刺博客

    每天举行会议 会议照片: 昨天已完成的工作与今天计划完成的工作及工作中遇到的困难: 成员姓名 昨天完成工作 今天计划完成的工作 工作中遇到的困难 蔡双浩 实现重设计个人界面的功能添加 实现关注,被关注 ...

  9. 百度前端技术学院-基础-day7.8

    任务:参考如下设计稿实现HTML页面及CSS样式 代码 点击预览 HTML 1 <!DOCTYPE html> 2 <html lang="en"> 3 & ...

  10. Robot Framework+adb框架自动化测试Android设备案例⑸——L1层测试用例

    一.L1层测试用例 1.初始化.robot *** Settings *** Resource ../L2层关键字.robot *** Test Cases *** 切换EMMC模式 [Tags] A ...