吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 3111|回复: 23
收起左侧

[其他转载] 页面模拟霓虹灯效果

[复制链接]
rundreamer 发表于 2022-4-12 12:14
html+css实现页面模拟霓虹灯效果
[HTML] 纯文本查看 复制代码
 <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus&#174;">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <title>霓虹灯</title>
<style type="text/css">
body{background-color: #00688B;}
.text{
	font-size: 64px;
	font-weight: normal;
	text-transform: uppercase;/*大写 lowercase小写;capitalize单词首字母大写*/
	fill:none;
	stroke: #B0E0E6;
	stroke-width: 2px;
	stroke-dasharray: 90 310;
	animation: stroke 6s infinite linear;
}
.text-1{
	stroke: #FFEC8B;
	animation-delay:-1.5s;
	text-shadow:5px 5px 5px #FFEC8B;
}
.text-2{
	stroke:#AEEEEE;
	animation-delay:-3s;
	text-shadow:5px 5px 5px #7FFFD4;
}
.text-3{
	stroke:#EEE0E5;
	animation-delay:-4.5s;
	text-shadow:5px 5px 5px #7FFFD4;
}
.text-4{
	stroke:#FFC1C1;
	animation-delay:-6s;
	text-shadow:5px 5px 5px #7FFFD4;
}
@keyframes stroke {
	to {
		stroke-dashoffset: -400;
	}
}
</style>
</head>

<body>
	<svg width="100%" height="100" style="margin:100px auto">
		<text text-anchor="middle" x="50%" y="50%" class="text text-1" >
			Happy birthday to you&#10084;
		</text>
		<text text-anchor="middle" x="50%" y="50%" class="text text-2" >
			Happy birthday to you&#10084;
		</text>
		<text text-anchor="middle" x="50%" y="50%" class="text text-3" >
			Happy birthday to you&#10084;
		</text>
		<text text-anchor="middle" x="50%" y="50%" class="text text-4" >
			Happy birthday to you&#10084;
		</text>
	</svg>
</body>

</html>
QQ录屏20220412121118_20220412121200.gif

免费评分

参与人数 5吾爱币 +5 热心值 +5 收起 理由
xiaolong666 + 1 + 1 热心回复!
shiyucj + 1 + 1 我很赞同!
elan + 1 + 1 谢谢@Thanks!
我是一个外星人 + 1 + 1 用心讨论,共获提升!
Q1998 + 1 + 1 我很赞同!

查看全部评分

发帖前要善用论坛搜索功能,那里可能会有你要找的答案或者已经有人发布过相同内容了,请勿重复发帖。

Wisdom_xiaogui 发表于 2022-4-12 14:17
落红护花 发表于 2022-4-12 13:57
问一下为什么要写4个text

@rundreamer

霓虹灯,利用时间差,营造动态效果
semiuel 发表于 2022-4-12 12:38
nihao3312 发表于 2022-4-12 12:56
感受老司机的爱 发表于 2022-4-12 13:07
这个真的是厉害,羡慕羡慕
落红护花 发表于 2022-4-12 13:13
感谢感谢,好东西
 楼主| rundreamer 发表于 2022-4-12 13:47
semiuel 发表于 2022-4-12 12:38
怎么改字号大小?

font-size
落红护花 发表于 2022-4-12 13:57
问一下为什么要写4个text

@rundreamer
8at08 发表于 2022-4-12 14:07
又学一招,感谢分享~
SEYUNIFAN0 发表于 2022-4-12 14:30
学会了感谢
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则 警告:本版块禁止灌水或回复与主题无关内容,违者重罚!

快速回复 收藏帖子 返回列表 搜索

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-3-28 23:24

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表