---
title: 特效
tags: CSS
---
<!-- 自訂CSS設定 -->
<style>

:root {
--shadow-color: #FF9E9E;
--shadow-color-light: white;
}

* {
padding: 0;
margin: 0;
box-sizing: border-box;
/*color: white;*/
}

/*body {
font-family: "Archivo", sans-serif;
background-color: white;
}*/

p {
/*margin: calc(50vh - 40px) auto 0 auto;*/
font-size: 65px;
text-transform: uppercase;
font-family: "Archivo Black", "Archivo", sans-serif;
font-weight: normal;
display: block;
height: auto;
text-align: center;
}

.title {
color: white;
animation: neon 3s infinite;
}

@keyframes neon {
0% {
text-shadow: -1px -1px 1px var(--shadow-color-light),
-1px 1px 1px var(--shadow-color-light),
1px -1px 1px var(--shadow-color-light),
1px 1px 1px var(--shadow-color-light),
0 0 3px var(--shadow-color-light),
0 0 10px var(--shadow-color-light),
0 0 20px var(--shadow-color-light),
0 0 30px var(--shadow-color),
0 0 40px var(--shadow-color),
0 0 50px var(--shadow-color),
0 0 70px var(--shadow-color),
0 0 100px var(--shadow-color),
0 0 200px var(--shadow-color);
}
50% {
text-shadow: -1px -1px 1px var(--shadow-color-light),
-1px 1px 1px var(--shadow-color-light),
1px -1px 1px var(--shadow-color-light),
1px 1px 1px var(--shadow-color-light),
0 0 5px var(--shadow-color-light),
0 0 15px var(--shadow-color-light),
0 0 25px var(--shadow-color-light),
0 0 40px var(--shadow-color),
0 0 50px var(--shadow-color),
0 0 60px var(--shadow-color),
0 0 80px var(--shadow-color),
0 0 110px var(--shadow-color),
0 0 210px var(--shadow-color);
}
100% {
text-shadow:
-1px -1px 1px var(--shadow-color-light),
-1px 1px 1px var(--shadow-color-light),
1px -1px 1px var(--shadow-color-light),
1px 1px 1px var(--shadow-color-light),
0 0 3px var(--shadow-color-light),
0 0 10px var(--shadow-color-light),
0 0 20px var(--shadow-color-light),
0 0 30px var(--shadow-color),
0 0 40px var(--shadow-color),
0 0 50px var(--shadow-color),
0 0 70px var(--shadow-color),
0 0 100px var(--shadow-color),
0 0 200px var(--shadow-color);
}
}

.subtitle {
font-size: 15px;
text-align:right;
text-shadow:
0 0 5px rgba(191, 201, 202 ),
0 0 10px rgba(174, 182, 191),
0 0 20px rgba(178, 186, 187),
0 0 40px rgba(153, 163, 164);
animation:neon-shine 2s linear infinite;
}

/* 螢光筆 */
.mark-pen {
font-weight: bold;
background-image: linear-gradient(transparent 60%, #3498DB 50% )
}

.neon-effect{
color:#fff;
letter-spacing:2px;
text-shadow: /*Green*/
0 0 6px rgba(34, 153, 84 )
/*0 0 1px rgba(67,232,216, 1),
0 0 1px rgba(67,232,216, 1),
0 0 1px rgba(67,232,216, 1);
animation:neon-shine 2s linear infinite;*/

/*text-shadow: Yelllow
0 0 2px rgba(247, 245, 41,.1),
0 0 2px rgba(247, 245, 41,1),
0 0 2px rgba(247, 245, 41,1),
0 0 2px rgba(247, 245, 41,1);
animation:neon-shine 2s 1s linear infinite;*/
}

.space{
word-spacing: 30px;
}
.bold{
font-weight: bold;
color: #E0E0E0;
}
.text-bright{
color: #E0E0E0;
}
</style>