Пишем нашу разметку:
Пишем наш стиль:
Смотрим наш результат:
HTML:
<h1 class="one">From left ?</h1>
<h1 class="two">From top ?</h1>
<h1 class="three">From center ?</h1>
<h1 class="four">From right to left ?</h1>
<h1 class="five">From radial center ?</h1>
SCSS:
h1 {
font-size: calc(100% + 3vw);
cursor: pointer;
line-height: 1.2;
margin: 0.3em 0;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
background-repeat: no-repeat;
transition: 0.5s ease-out;
}
.one {
background-image: linear-gradient(to right, #fb3569 45%, #51eaea 55%);
background-size: 220% 100%;
background-position: 100% 50%;
&:hover {
background-position: 0% 50%;
}
}
.two {
background-image: linear-gradient(to bottom, #fb3569 45%, #51eaea 55%);
background-size: 100% 220%;
background-position: 50% 100%;
&:hover {
background-position: 50% 0%;
}
}
.three {
background-image: linear-gradient(to bottom, #fb3569, #fb3569), linear-gradient(to bottom, #51eaea, #51eaea);
background-size: 0% 100%, 100% 100%;
background-position: center;
&:hover {
background-size: 100% 100%, 100% 100%;
}
}
.four {
background-image: linear-gradient(to bottom, #fb3569, #fb3569), linear-gradient(to bottom, #51eaea, #51eaea);
background-size: 0% 100%, 100% 100%;
background-position: center;
background-position: 0% 50%, 50% 50%;
transition: 0.5s background-size ease-out;
&:hover {
background-size: 100% 100%, 100% 100%;
background-position: 100% 50%, 50% 50%;
}
}
.five {
background-image: radial-gradient(closest-side, #fb3569 50%, transparent 100%), linear-gradient(to bottom, #51eaea, #51eaea);
background-size: 0% 0%, 100% 100%;
background-position: 50% 50%, center;
&:hover {
background-size: 260% 260%, 100% 100%;
}
}
body {
min-height: 95vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Permanent Marker', cursive;
background: #fffde1;
}