If your website theme is dark and you have used a lot of purple on your website, you can apply this code to the effects that are placed on the website titles. In this code, website titles are made more beautiful with the help of purple shades. When applied, this shadow changes the color of the text from white to black, and by removing the shadow, the color of the text becomes white again.
HTML
<!-- This script got from www.devanswer.com -->
<ul>
<li>D</li>
<li>E</li>
<li>V</li>
<li>A</li>
<li>N</li>
<li>S</li>
<li>W</li>
<li>E</li>
<li>R</li>
</ul><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
body {
margin: 0;
padding: 0px;
background-color: #000000;
}
ul {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
margin: 0;
padding: 0;
}
ul li {
list-style: none;
font-size: 5em;
font-family: cursive;
letter-spacing: 5px;
color: #ffffff;
animation: animate 9s linear infinite;
}
@keyframes animate {
0% {
color: #ffffff;
text-shadow: none;
}
15% {
color: #ffffff;
text-shadow: none;
}
30% {
color: #000000;
text-shadow: 0 0 7px #ff0fff, 0 0 15px #ff78ff;
}
45% {
color: #ffffff;
text-shadow: none;
}
60% {
color: #000000;
text-shadow: 0 0 7px #ff0fff, 0 0 15px #ff78ff;
}
}
90% {
color: #ffffff;
text-shadow: none;
}
100% {
color: #ffffff;
text-shadow: none;
}
}
ul li:nth-child(1) {
animation-delay: .2s;
}
ul li:nth-child(2) {
animation-delay: .4s;
}
ul li:nth-child(3) {
animation-delay: .6s;
}
ul li:nth-child(4) {
animation-delay: .8s;
}
ul li:nth-child(5) {
animation-delay: 1s;
}
ul li:nth-child(6) {
animation-delay: 1.2s;
}
ul li:nth-child(7) {
animation-delay: 1.4s;
}
ul li:nth-child(8) {
animation-delay: 1.6s;
}
ul li:nth-child(9) {
animation-delay: 1.8s;
}
