使用css实现闪光的霓虹灯文字效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>霓虹文本</title>
</head>
<style>
@import url(https://fonts.googleapis.com/css?family=Pacifico);
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
text-align: center;
background: black;
}
.neon {
color: #cce7f8;
font-size: 2.5rem;
font-family: 'Pacifico', cursive;
text-transform: uppercase;
animation: shining 0.1s alternate infinite;
}
@keyframes shining {
from {
text-shadow: 0 0 6px rgba(182, 211, 207, 0.9),
0 0 30px rgba(182, 211, 207, 0.3), 0 0 12px rgba(15, 115, 223, 0.5),
0 0 21px rgba(15, 115, 223, 0.9), 0 0 34px rgba(15, 115, 223, 0.8),
0 0 54px rgba(15, 115, 223, 0.9);
}
to {
text-shadow: 0 0 6px rgba(182, 211, 207, 1),
0 0 30px rgba(182, 211, 207, 0.4), 0 0 12px rgba(15, 115, 223, 0.6),
0 0 22px rgba(15, 115, 223, 0.8), 0 0 38px rgba(15, 115, 223, 0.9),
0 0 60px rgba(15, 115, 223, 1);
}
}
</style>
<body>
<div class="neon">Good evening, and good night!</div>
</body>
</html>
- 链接
-
本文向大家介绍使用css实现霓虹灯效果相关面试题，主要包含被问及使用css实现霓虹灯效果时的应答技巧和注意事项，需要的朋友参考一下 https://github.com/censek/HTML5-CSS3-demos/tree/master/%E9%9C%93%E8%99%B9%E6%96%87%E6%9C%AC
-
本文向大家介绍Android开发实现布局帧布局霓虹灯效果示例，包括了Android开发实现布局帧布局霓虹灯效果示例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了Android开发实现布局帧布局霓虹灯效果。分享给大家供大家参考，具体如下： 效果图： 实现方式： FrameLayout中，设置8个TextView，在主函数中，设计颜色数组，通过有序替换他们颜色，实现渐变效果。 java代码：
-
本文向大家介绍使用css实现彩虹的效果相关面试题，主要包含被问及使用css实现彩虹的效果时的应答技巧和注意事项，需要的朋友参考一下
-
本文向大家介绍WPF实现背景灯光随鼠标闪动效果，包括了WPF实现背景灯光随鼠标闪动效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了WPF实现背景灯光随鼠标闪动的具体代码，供大家参考，具体内容如下 实现效果如下： 思路：将容器分割成组合三角形Path，鼠标移动时更新每个三角形的填充颜色。 步骤： 1、窗体xaml 只需放置一个Canvas。 2、交互逻辑 说明：当组合三角形过多时，
-
问题内容： 像手电筒应用程序一样，我只需要将闪光灯与API camera2（Android 5，API级别21）一起使用。但是我发现的所有示例都需要在视图中显示摄像机流 问题答案： https://github.com/pinguo- yuyidong/Camera2/blob/master/app/src/main/java/us/yydcdut/androidltest/otheractivi
-
本文向大家介绍用css3实现文字发光的效果相关面试题，主要包含被问及用css3实现文字发光的效果时的应答技巧和注意事项，需要的朋友参考一下 text-shadow: 实现;