每天一个CSS小特效，文字闪烁——【钢铁侠：爱你三千遍】
文章目录
- 前言
- 效果图
- HTML篇
- CSS篇
- 1. 盒子模型设置
- 2. 动画设置
- 完整代码
前言
我是前端小刘不怕牛牛，love you 3000，愿你能遇到值得的人。
今天分享一个唯美的文字闪烁CSS特效
希望大家能喜欢
效果图
HTML篇
代码：
<div class="main"><div><span>I</span></div><div><span>l</span><span>o</span><span>v</span><span>e</span></div><div><span>y</span><span>o</span><span>u</span></div><div><span>3</span><span>0</span><span>0</span><span>0</span></div>
</div>
- 这里将每个字母分别用盒子包住是为了后面设置动画延迟，保证文字闪烁呈现流水型
- 还记得span是行内元素吧，它们可以在同一行排列，不过div不能，所以我们还需要用
display转换div的元素显示模式为inline-block - 这里可能小伙伴会有疑问为什么还要用div将每个单词保住，这里是因为后面用flex布局，让单词之间自动设置间隙，整体更加好看
CSS篇
1. 盒子模型设置
代码如下：
body{background-color: black;}.main{padding-top: 249px;margin: 0 auto;width: 1200px;display: flex;justify-content: space-around;font-family: 'Courier New', Courier, monospace;}.main div{display: inline-block;color: transparent;}span{font-size: 120px;animation: twinkle 4.6s linear infinite;}
- 这里用到flex布局的
justify-content属性，display为flex的父元素的子元素称为项目，而space-around属性值，则使项目之间根据父元素宽度平均分布间隔，（两端与项目之间也会分配间隔，为项目与项目之间间隔的一半，这个在案例中不重要） - 这里对span标签选择，设置动画，
animation属性可以连写- 第一个值
twinkle为动画名字 - 第二个为
duration,动画播放时长 - 第三个值为
timing-function,时间过渡曲线，linear为线性过渡，动画播放无倍数变换 - 第四个值为播放次数，infinity为无限循环
- 将文字颜色设置为透明，当然也可以用
opacity
- 第一个值
2. 动画设置
代码如下：
.main div:nth-child(1) span:nth-child(1){animation-delay: 0s;}.main div:nth-child(2) span:nth-child(1){animation-delay: 0.4s;}.main div:nth-child(2) span:nth-child(2){animation-delay: 0.8s;}.main div:nth-child(2) span:nth-child(3){animation-delay: 1.2s;}.main div:nth-child(2) span:nth-child(4){animation-delay: 1.6s;}.main div:nth-child(3) span:nth-child(1){animation-delay: 2.0s;}.main div:nth-child(3) span:nth-child(2){animation-delay: 2.4s;}.main div:nth-child(3) span:nth-child(3){animation-delay: 2.8s;}.main div:nth-child(4) span:nth-child(1){animation-delay: 3.2s;}.main div:nth-child(4) span:nth-child(2){animation-delay: 3.6s;}.main div:nth-child(4) span:nth-child(3){animation-delay: 4s;}.main div:nth-child(4) span:nth-child(4){animation-delay: 4.4s;}@keyframes twinkle{0%{color: transparent;} 100%{color: aliceblue;text-shadow: 0 0 4px skyblue,0 0 10px skyblue,0 0 20px skyblue,0 0 30px skyblue,0 0 40px skyblue,0 0 50px skyblue,0 0 60px skyblue,0 0 70px skyblue,0 0 80px skyblue,0 0 90px skyblue,0 0 100px skyblue,0 0 110px skyblue,0 0 120px skyblue,0 0 130px skyblue;/* 文字阴影叠加 */}}
- 给每个span盒子设置各自的动画延迟时间，实现流水型效果
- 这里需要注意复合选择器写法和nth-child方法的选择方式
- 创建动画播放，上面用文字阴影叠加效果，实现文字闪烁，其实一些好看的文字特效，阴影部分都是用叠加的效果做的，大家还可以试一下用多个颜色叠加，做出个五彩斑斓的黑如何？
（随便叠了一个）
完整代码
代码如下：
<!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>文字闪烁效果</title><style>body{background-color: black;}.main{padding-top: 249px;margin: 0 auto;width: 1200px;display: flex;justify-content: space-around;font-family: 'Courier New', Courier, monospace;}.main div{display: inline-block;color: transparent;}span{font-size: 120px;animation: twinkle 4.6s linear infinite;}.main div:nth-child(1) span:nth-child(1){animation-delay: 0s;}.main div:nth-child(2) span:nth-child(1){animation-delay: 0.4s;}.main div:nth-child(2) span:nth-child(2){animation-delay: 0.8s;}.main div:nth-child(2) span:nth-child(3){animation-delay: 1.2s;}.main div:nth-child(2) span:nth-child(4){animation-delay: 1.6s;}.main div:nth-child(3) span:nth-child(1){animation-delay: 2.0s;}.main div:nth-child(3) span:nth-child(2){animation-delay: 2.4s;}.main div:nth-child(3) span:nth-child(3){animation-delay: 2.8s;}.main div:nth-child(4) span:nth-child(1){animation-delay: 3.2s;}.main div:nth-child(4) span:nth-child(2){animation-delay: 3.6s;}.main div:nth-child(4) span:nth-child(3){animation-delay: 4s;}.main div:nth-child(4) span:nth-child(4){animation-delay: 4.4s;}@keyframes twinkle{0%{color: transparent;} 100%{color: aliceblue;text-shadow: 0 0 4px skyblue,0 0 10px skyblue,0 0 20px skyblue,0 0 30px skyblue,0 0 40px skyblue,0 0 50px skyblue,0 0 60px skyblue,0 0 70px skyblue,0 0 80px skyblue,0 0 90px skyblue,0 0 100px skyblue,0 0 110px skyblue,0 0 120px skyblue,0 0 130px skyblue;/* 文字阴影叠加 *//* text-shadow: 0 0 4px red,0 0 10px orange,0 0 20px yellow,0 0 30px green,0 0 40px blue,0 0 50px skyblue,0 0 60px blueviolet; */}}</style>
</head>
<body><div class="main"><div><span>I</span></div><div><span>l</span><span>o</span><span>v</span><span>e</span></div><div><span>y</span><span>o</span><span>u</span></div><div><span>3</span><span>0</span><span>0</span><span>0</span></div></div>
</body>
</html>
这里牛牛推荐一个功能强大的刷题软件，牛客网。里面有各大厂的面试题，还有模拟面试，让你身临其境感受面试，不仅如此，还要很多大佬的面试经验，看完硕果累累。甚至可以在里面投递简历，
每天一个CSS小特效，文字闪烁——【钢铁侠：爱你三千遍】相关推荐
- css background-image 高度自适应_每天一个CSS小技巧 - 内容元素的自适应
大家都知道如果不给一个元素设定一个具体的height,它就会自动适应其内容的高度.但是如果我们希望width也有类似的行为,我们该怎么做呢? 下面是我们实际的HTML: Let's assume we ...
- html布局四个正方形,分享一个css小技巧，实现给正方形的四个角设置小方块的方法...
项目的UI设计中有这样的样式,一开始用的背景图,简单粗暴,后来在其他地方出了问题,因为是背景图的原因,这个框框被拉长了后小方块的宽度也变宽了,然后想用纯css实现,百度居然没查到类似的东东,后来在um ...
- 每日一个css小技巧 6/10 水平垂直居中
行内元素水平垂直居中 1 常规设置 一句话总结: text-align设置水平居中,line-height = height 设置垂直居中 2 父盒子模拟为表格 块级元素水平垂直居中 1 positi ...
- 简单实现一个手持弹幕功能+文字抖动特效
简单实现一个手持弹幕功能+文字抖动特效 效果展示 代码如下 小程序内更多配置效果预览 总结 前段时间抖音上有个抖动弹幕挺火的,于是决定仿写一个,话不多说,先看效果- 效果展示 GIF图看着有点模糊,但 ...
- HTML文字样式显示闪烁,怎么纯用css代码使文字展示闪动效果？（代码示例）
在网页中,通常设计师们为了凸显自己的产品主题,总会让文字或者加点特效,比如使文字不停的闪动,或有规律的变色.以便达到吸引人关注的目的.那么除了用ps制作的gif动画外,还有哪些方法可以实现这样的功能特 ...
- html语言文字闪烁,CSS3+HTML5特效6 - 闪烁的文字
先看效果 abcd 这个效果也比较简单,利用keyframes对文字的大小.透明度及颜色做循环显示. CSS @-webkit-keyframes flash { 0%{ opacity:; } 50 ...
- php 让字体闪烁,js实现文字闪烁特效的方法
本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下: 运行效果图: 实现原理:使用style对象来设置css属性,结合定时器就可以实现js实现文字闪烁特效. 具体代码 ...
- css鼠标划过时的一些小特效
css部分----------- .div1{width: 100px; height: 100px; border: 1px solid; position: relative; backgroun ...
- php字体闪烁,怎么纯用css代码使文字展示闪动效果？（代码示例）
在网页中,通常设计师们为了凸显自己的产品主题,总会让文字或者加点特效,比如使文字不停的闪动,或有规律的变色.以便达到吸引人关注的目的.那么除了用ps制作的gif动画外,还有哪些方法可以实现这样的功能特 ...
最新文章
- RESTful之异常处理 Exceptions
- java 获取内存使用情况_Java内存使用情况查看工具
- c语言函数 t啥意思,C语言函数大全(t开头)
- 攻破Win7~Win10 PatchGuard(KPP DSE)【支持Win10 TH1/TH2/RS1/RS2】【WIN64内核越狱】
- Qt笔记-QSerialPort的使用（串口通信简单实例）
- 学习是第一生产力——学习型组织众书读后感
- json、js数组真心不是想得那么简单
- [bzoj1717][Usaco2006 Dec]Milk Patterns 产奶的模式 (hash构造后缀数组，二分答案)
- 冒泡排序面向对象java_冒泡排序
- android网页去广告插件下载,Adblock Plus（去广告插件）APP增强稳定版
- 小程序跳转样式布局错乱_微信小程序页面布局问题
- [Java] 身份证号码验证
- Predicting microRNA–disease associations from lncRNA–microRNA interactions via Multiview Multitask
- [Python人工智能] 九.gensim词向量Word2Vec安装及《庆余年》中文短文本相似度计算
- 用 Androidx + 蓝牙HC05 点灯（2）: Handler 掌舵人 和 Thread 线人，逮着蓝牙老大说黑话：此灯为我开，101011...
- C# 判断正负数个数
- 主力用计算机吸筹,主力进场买点 找主力吸筹提款 通达信副图指标 源码 贴图(图文)...
- 物联网温湿度显示控制项目（网页、Android双端显示搭载linux平台网关MQTT通信）
- Javascript定义类或对象之动态原型法
- 脑与认知科学1 脑的基本结构上
热门文章