Glowing Card

glowing-card.markdown

Glowing Card

A Pen by kunj on CodePen.

License.

index.html

<div class="myview">
    <ul>                    <li>UI/UX</li>            <li>UI/UX</li>            <li>UI/UX</li>
   </ul>
</div>

style.css

*, body{
   padding: 0px;
   height: 0px;
}
body{
background-color: #000;
}
.myview{
 border-radius: 8px;
 position: relative;
 margin: 70px auto 0;
 width: 400px;
 height: 300px;
 background-image: linear-gradient(-45deg, #000,#111);
 text-align: center;
}
.myview ul{
 font-family: 'Kalam', cursive;
 font-size: 80px;
 list-style: none;
 position: relative;
}
.myview ul li:nth-child(1){
 color: #0000ff;
 filter: blur(10px);
 animation: child1 2s alternate infinite;      }
.myview ul li:nth-child(2){
 color: #00ffff;
 filter: blur(5px);
 animation: child2 2s alternate infinite;
 }
            
.myview ul li:nth-child(3){
  color: #000;
  filter: blur(0px);     }
@keyframes child1
{
 0%, 100%{
 filter: blur(10px);
}
50%{
  filter: none;
 }
 }
 @keyframes child2
 {
  0%, 100%{
 filter: blur(5px);
  }
 50%{
 filter: blur(1px);
 }
 }
.myview:before, .myview:after{
 content: '';
 border-radius: 10px;
 position: absolute;
 left: -2px;
 top: -2px;
 width: calc(100% + 4px);
 height: calc(100% + 4px);
 background-image: linear-gradient(45deg, #ff0000, #ffff00, #00ff00,  #0000ff, #00ffff);
                background-size: 400%;
z-index: -1;
 animation: move 10s alternate infinite;
}
.myview:after{
filter: blur(10px);
}
@keyframes move{
0%, 100%{
background-position: 0 0;
 }
 50%{
 background-position: 100% 0;
 }
}