css3 制作炫酷的发光文字动画

布局：

<body><h2><span style="--i:1;">H</span><span style="--i:2;">a</span><span style="--i:3;">p</span><span style="--i:4;">p</span><span style="--i:5;">y</span><span style="--i:6; margin-left:5vw;">N</span><span style="--i:7;">e</span><span style="--i:8;">w</span><span style="--i:9; margin-left:5vw;">Y</span><span style="--i:10;">e</span><span style="--i:11;">a</span><span style="--i:12;">r</span></h2>
</body>

样式：

<style>*{margin: 0;padding: 0;box-sizing: border-box;font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;}body{color: #fff;background-color: #111;display: flex;justify-content: center;align-items: center;min-height: 100vh;}h2{display: flex;color: transparent;font-size: 10vw;}h2 span{animation: animate 3s linear infinite;animation-delay: calc(0.1s* var(--i));}@keyframes animate{0%{color: #fff;filter: blur(2px) hue-rotate(0deg);text-shadow: 0 0 10px #00b3ff,0 0 20px #00b3ff,0 0 40px #00b3ff,0 0 80px #00b3ff,0 0 120px #00b3ff,0 0 200px #00b3ff,0 0 300px #00b3ff,0 0 400px #00b3ff;}30%,70%{color: #fff;filter: blur(2px) hue-rotate(360deg);text-shadow: 0 0 10px #00b3ff,0 0 20px #00b3ff,0 0 40px #00b3ff,0 0 80px #00b3ff,0 0 120px #00b3ff,0 0 200px #00b3ff,0 0 300px #00b3ff,0 0 400px #00b3ff;}100%{color: transparent;box-shadow: none;filter: blur(2px) hue-rotate(0deg);}}
</style>

查看效果：

css3 制作炫酷的发光文字动画相关推荐

html设置发光字体制作,CSS3制作炫酷的自定义发光文字
CSS3制作炫酷的自定义发光文字 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px ...
10大炫酷的HTML5文字动画特效欣赏
文字是网页中最基本的元素,在CSS2.0时代,我们只能在网页上展示静态的文字,只能改变他的大小和颜色,显得枯燥无味.随着HTML5的发展,现在网页中的文字样式变得越来越丰富了,甚至出现了文字动画,HT ...
纯CSS3制作炫酷的3D相册
纯CSS3制作炫酷的3D相册整体效果如下所示: 整体代码如下所示: html中的代码 <!DOCTYPE html> <html lang="en"> & ...
字掉落炫酷网站_10大炫酷的HTML5文字动画特效欣赏
文字是网页中最基本的元素,在CSS2.0时代,我们只能在网页上展示静态的文字,只能改变他的大小和颜色,显得枯燥无味.随着HTML5的发展,现在网页中的文字样式变得越来越丰富了,甚至出现了文字动画,HT ...
html border阴影效果_一篇文章教会你使用html+css3制作炫酷效果
[一.项目背景] 在浏览一些网站的时候,经常会看到很多的炫酷的效果去装饰页面,使它看起来更高端大气一些.比如,艺龙就采用了图片上加载文字,点击图片使把对应的图片放大,使用户清晰,直观的看到内容.这种效 ...
js中select下拉框重置_如何利用CSS3制作炫酷的下拉框
很多小伙伴都不清楚CSS3是做什么?用途是什么? 接下来我就给展示一个css3制作一个炫酷下拉框.其实不只是这些,还有很多. CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,200 ...
火焰字，通过PS制作炫酷的火焰文字
效果图: 操作步骤:1.Ctrl+N新建画布1280*720,选择文字工具打出你要制作的字 2选择文字工具打出你要制作的字 3..Ctrl+Shift+N新建图层,按住Ctrl左键选择文字图层,出现蚂 ...
css3制作炫酷动画相册
1. 特别说明:本段代码未作兼容处理,仅在高版本谷歌浏览器中起作用哟: 2.这里我使用的是网络图片,想制作属于自己相册的小伙伴们,可以新建img文件夹,在css样式中,将背景土拍你路径替换为自己的图片 ...
css3制作炫酷导航栏效果转
今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简 ...

css3 制作炫酷的发光文字动画

css3 制作炫酷的发光文字动画相关推荐

最新文章

热门文章