Aliens text animation
source link: https://gist.github.com/xaisremx/8b58879d019da7548d5e8352d0d15a91
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Aliens text animation · GitHub
Instantly share code, notes, and snippets.
<h1 class="aliens"> <span>w</span> <span>i</span> <span>t</span> <span>a</span> <span>j</span> </h1> <h2 class="aliens"> <span>x</span> <span>a</span> <span>i</span> <span>s</span> <span>r</span> <span>e</span> <span>m</span> <span>x</span> </h2>
html { background-color: #000; }
h1 { color: #ffffff; display: inline-block; font-size: 5vw; left: 50%; position: absolute; top: 20%; transform: translate(-50%, -50%); }
.aliens > * { animation: turn 5s ease-in; display: inline-block; font-family: sans-serif; font-weight: normal; letter-spacing: 3vw; text-shadow: 0 0 .5rem #def; text-transform: uppercase; transform: scaleY(4); }
@keyframes turn { 0% { text-shadow: 0 0 0 #def; transform: scaleY(4) rotateY(90deg); } 100% { text-shadow: 0 0 .5rem #def; transform: scaleY(4) rotateY(0); } } h2 { color: #ffffff; display: inline-block; font-size: 5vw; left: 25%; position: absolute; top: 75%; transform: translate(-10%, -50%); }
.aliens > * { animation: turn 5s ease-in; display: inline-block; font-family: sans-serif; font-weight: normal; letter-spacing: 3vw; text-shadow: 0 0 .5rem #def; text-transform: uppercase; transform: scaleY(4); }
@keyframes turn { 0% { text-shadow: 0 0 0 #def; transform: scaleY(4) rotateY(90deg); } 100% { text-shadow: 0 0 .5rem #def; transform: scaleY(4) rotateY(0); } }
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK