diff --git a/README.md b/README.md index 987dc62..f8582b6 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,3 @@ -# Some cool CSS effects +# Glowing Tubelight Text Animation Effects -Check my branches and have fun! - -View [DEMOS](https://codepen.io/filippoerbisti) on Codepen. +View and try [DEMO](https://codepen.io/filippoerbisti/pen/JjpJOGj) on Codepen. diff --git a/index.html b/index.html new file mode 100644 index 0000000..0b99d85 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + Glowing Tubelight Text Animation Effects + + + +

Edit me

+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a0b556b --- /dev/null +++ b/style.css @@ -0,0 +1,43 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: arial; +} + +body { + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + background: #07252d; +} + +h2 { + position: relative; + font-size: 6em; + letter-spacing: 15px; + color: #0e3742; + text-transform: uppercase; + width: 100%; + text-align: center; + -webkit-box-reflect: below 1px linear-gradient(transparent, #0004); + line-height: 0.70em; + outline: none; + animation: animate 5s linear infinite; +} + +@keyframes animate { + 0%, 18%, 20%, 50.1%, 60%, 65.1%, 80%, 90.1%, 92% { + color: #0e3742; + text-shadow: none; + } + 18.1%, 20.1%, 30%, 50%, 60.1%, 65%, 80.1%, 90%, 92.1%, 100% { + color: #fff; + text-shadow: 0 0 10px #e3bcf4, + 0 0 20px #e3bcf4, + 0 0 40px #e3bcf4, + 0 0 80px #e3bcf4, + 0 0 160px #e3bcf4; + } +}