You can show them an animated website to attract more visitors to your website when it loads. This animation can be an effect on the title of your website. Like this code that first changes the background color. Then the title is displayed along with the animation and at the end the title is two colors. The upper half is green and the lower half is white.
HTML
<!-- This script got from www.devanswer.com -->
<div class = 'container projects'>
<h1>Devanswer</h1>
<div class="overlay"></div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #6CD9CE;
--secondary-color: #D93BA1;
--complimentary-color: #2E2473;
}
.container {
min-height: 100vh;
position: relative;
width: 100vw;
display: flex;
background-color: var(--complimentary-color);
justify-content: center;
align-items: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
position: relative;
}
h1 {
font-size: 150px;
color: var(--primary-color);
transform: translateY(-600px);
animation: 1.2s slideIn ease-in-out forwards 1s;
z-index: 10;
opacity: 0;
position: relative;
}
h1::before {
content: '';
width: 0%;
height: 76px;
background-color: var(--secondary-color);
position: absolute;
bottom: -10px;
animation: 1s underline ease-in-out forwards 2s;
mix-blend-mode: screen;
}
.overlay {
position: absolute;
width: 100%;
top: 0;
bottom: 0;
opacity: 0;
left: 0;
right: 0;
background-color: var(--secondary-color);
transform: scale(.5);
animation: .5s slideIn ease-in-out forwards, 1s skewBg ease-in-out;
}
@keyframes skewBg {
0% {
transform: scale(.5);
}
100% {
transform: scale(1);
}
}
@keyframes underline {
100% {
width: 100%;
}
}
@keyframes slideIn {
100% {
transform: translateY(0px);
opacity: 1;
}
}
