1. 发光文字页面效果

2. 完整代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>发光文字</title><link href="3.css" rel="stylesheet" type="text/css">
</head><body><h2><span>i'</span>m<span>coming</span>
</h2></body>
</html>

*{/* 初始化，取消内外边距 */margin:0;padding:0;/* 设置的边框和内边距的值是包含在总宽高内的 */box-sizing:border-box;
}
body{/* 弹性布局，水平垂直剧中 */display:flex;justify-content:center;align-items:center;/* 100%窗口高度 */height:100vh;background-color:#000000;
}h2{/* 设置文字样式 */font-size:96px;color:#666666;/* 无小写字母，仅有大写字母 */text-transform:uppercase;/* 设置文字间隔 */letter-spacing:5px;/* 鼠标移入时，光标变成小手 */cursor:pointer;
}/* 设置动画 */
h2 span{transition:0.5s;
}/* 通过增加边距的方式，创建动画 */
h2:hover span:nth-child(1){margin-right:10px;
}
h2:hover span:nth-child(1)::after{content:"";
}
h2:hover span:nth-child(2){margin-left:40px;
}
h2:hover span{color:#FFFFFF;/* 文字发光阴影 */text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 40px #fff,0 0 80px #fff;
}

HTML+CSS项目练习（8）-发光文字动画相关推荐

JS框架_(Typed.js)彩色霓虹灯发光文字动画
百度云盘传送门密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...
css3 制作炫酷的发光文字动画
布局: <body><h2><span style="--i:1;">H</span><span style="-- ...
ae制h5文字动画_7款超华丽的HTML5 Canvas文字动画特效
本文作者html5tricks,转载请注明出处文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这时候我们就 ...
html5字体动画效果,7款超华丽的HTML5 Canvas文字动画特效
原标题:7款超华丽的HTML5 Canvas文字动画特效文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这 ...
CSS实现文字动画效果
今天来到了我们的第20个小项目的练习,距离我们100个小项目的练习,我们已经完成了五分之一了,剩下的五分之四,我们一起加油练习. 今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加 ...
奇思妙想 CSS 文字动画
之前有写过两篇关于字体的文章,是关于如何定义字体的: 你该知道的字体 font-family[1] Web 字体 font-family 再探秘[2] 本文将会和这篇 -- CSS 奇思妙想边框动画[ ...
CSS实现文字动画效果【每日一题】
今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是用在页面加载时的效果,现在,我们一起来看一下这个项目的最终效果: HTML代码: <!DOCTYPE html> <htm ...
css倾斜发光文字鼠标移动js特效
下载地址一款粉色的css字体发光效果,倾斜发光文字素材分享给大家,只需鼠标悬停文字,即可产生倾斜发光和放大缩小的动画效果. dd:
【每日一练】20—CSS实现文字动画效果
写在前面今天来到了我们的第20个小项目的练习,距离我们100个小项目的练习,我们已经完成了五分之一了,剩下的五分之四,我们一起加油练习. 今天练习的这个小项目是一个CSS实现的文字动画效果,主要就是 ...
css盒心形的代码过程,如何使用CSS和D3实现用文字组成的心形动画效果（附代码）...
本篇文章给大家带来的内容是关于如何使用CSS和D3实现用文字组成的心形动画效果(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://gith ...

HTML+CSS项目练习（8）-发光文字动画

1. 发光文字页面效果

2. 完整代码

HTML+CSS项目练习（8）-发光文字动画相关推荐

最新文章

热门文章