每日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. 【电子取证：抓包篇】Fiddler 抓包配置与数据分析（简）

    Fiddler 抓包配置与分析(简) 简单介绍了Fiddler抓包常用到的基础知识,看完可以大概明白怎么分析抓包数据 ---[suy999]   Fiddler 抓包工具,可以将网络传输发送与接受的数 ...

  2. NOIP2013 解题报告

    TG Day1 T3 货车运输 考虑货车的运输路径,最小边肯定是越大越好. 那就把图的最大生成树拉出来,每一辆货车在上面都有唯一确定的运输路径,否则必然会经过一条更小或相同的边. 然后倍增求路径上的最 ...

  3. C语言讲义——链表完整代码

    #include <stdio.h> #include <stdlib.h> #include <string.h> struct Node { int _id; ...

  4. java Base64算法

    Base64算法并不是加密算法,他的出现是为了解决ASCII码在传输过程中可能出现乱码的问题.Base64是网络上最常见的用于传输8bit字节码的可读性编码算法之一.可读性编码算法不是为了保护数据的安 ...

  5. 《Spring Boot 实战纪实》之如何攥写需求文档

    目录 前言 (思维篇)人人都是产品经理 1.需求文档 1.1 需求管理 1.2 如何攥写需求文档 1.3 需求关键点文档 2 原型设计 2.1 缺失的逻辑 2.2 让想法跃然纸上 3 开发设计文档 3 ...

  6. 小知识点 之 JVM -XX:MaxGCPauseMillis 与 -XX:GCTimeRatio

    写在前边 JVM调优更多是针对不同应用类型及目标进行的调整,往往有很大的实验成份,通过实验来针对当前应用设置相对合适的参数,提高应用程序的性能与稳定性 最近在复习JVM,Parallel Scaven ...

  7. JS代码下载百度文库纯文本文档

    下载百度文库纯文本文档流程 1.按 F12 或  Ctrl+Shift+I打开后台(或点击右键,在点击检查)[建议使用谷歌浏览器] 2.切换到控制台,赋值粘贴以下js代码,回车后,浏览器将自动下载保存 ...

  8. 树莓CM3开机连接WIFI

    两年没玩树莓派了,最近拿了一块CM3,发现启动后不能连接WIFI,网上的文章都是针对3B的,修改/etc/network/interfaces文件和/etc/wpa_supplicant/wpa_su ...

  9. PyQt(Python+Qt)学习随笔：Qt Designer中部件与国际化有关的设置translatable、 disambiguation和comment含义

    在Qt Designer的部件的多个属性中,如toolTip.whatsThis.accessibleName.accessibleDescription.text等都有国际化属性设置,国际化属性有三 ...

  10. PyQt(Python+Qt)学习随笔：toolButton的toolButtonStyle属性

    toolButtonStyle属性用于确认toolButton按钮显示文字.图标的方式,其类型为枚举类型 Qt.ToolButtonStyle,有如下值: ToolButtonIconOnly(值为0 ...