A small twitter loading/splashscreen re-creation
A Pen by Polychroma, LLC. on CodePen.
<div class="cover"> | |
<img src="http://www.macdrifter.com/theme/images/twitter-snow.svg" alt="Twitter Bird" id="icon"> | |
</div> | |
<img src="https://www.ghacks.net/wp-content/uploads/2019/06/How-to-disable-Twitters-new-interface.jpg" alt="" class="content"> |
body { | |
margin: 0; | |
padding: 0; | |
} | |
.cover { | |
background: #1DA1F2; | |
position: fixed; | |
width: 100%; | |
height: 100%; | |
opacity: 0; | |
animation: fade-out 4s /*infinite*/; | |
} | |
.cover #icon { | |
--size: 100px; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%,-50%); | |
width: var(--size); | |
animation: zoom-in 2s /*infinite*/; | |
animation-delay: 2s; | |
} | |
@keyframes zoom-in { | |
50% { | |
width: var(--size); | |
} | |
60% { | |
width: calc(var(--size) * 0.9); | |
} | |
100% { | |
width: 250%; | |
} | |
} | |
@keyframes fade-out { | |
0%, 85% { | |
opacity: 1; | |
} | |
100% { | |
opacity: 0; | |
} | |
} | |
.content { | |
width: 100%; | |
} |
A small twitter loading/splashscreen re-creation
A Pen by Polychroma, LLC. on CodePen.