Skip to content
Advertisements

CSS Animation – On/Off Light


HTML CODE:

<!DOCTYPE html>
<html>
<head>
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="animation4.css">
</head>
<body>
s
    <ul>
        <li>C</li>
        <li>O</li>
        <li>D</li>
        <li>E</li>
        <li>B</li>
        <li>L</li>
        <li>O</li>
        <li>G</li>
        <li>G</li>
        <li>E</li>
        <li>R</li>
            </ul>

</body>
</html>

CSS CODE:

body{
  margin:0;
  padding: 0;
  background: #262626;
}
ul{
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  margin: 0;
  padding: 0;
  display: flex;
}
ul li{
  list-style: none;
  color:  #484848;
  font-family: arial;
  font-size: 5em;
  letter-spacing: 15px;
  animation: ani 2.4s linear infinite;
}
@keyframes ani {
  0%{
    color: #484848;
    text-shadow: none;
  }
  90%{
    color: #484848;
    text-shadow: none;
  }
  100%{
    color: #fff900;
    text-shadow: 0 0 7px #fff900,0 0 50px #ff6c00;
  }
}
ul li:nth-child(1){
  animation-delay: .2s;
}
ul li:nth-child(2){
  animation-delay: .4s;
}
ul li:nth-child(3){
  animation-delay: .8s;
}
ul li:nth-child(4){
  animation-delay: 1s;
}
ul li:nth-child(5){
  animation-delay: 1.2s;
}
ul li:nth-child(6){
  animation-delay: 1.4s;
}
ul li:nth-child(7){
  animation-delay: 1.6s;
}
ul li:nth-child(8){
  animation-delay: 1.8s;
}
ul li:nth-child(9){
  animation-delay: 2s;
}
ul li:nth-child(10){
  animation-delay: 2.2s;
}
ul li:nth-child(11){
  animation-delay: 2.4s;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: