На Gif
ниже, текст появляется только после того, как через него проходит черная точка. До этого текст невидим.
Это было сделано с помощью Flash
, но как мы можем добиться этого с помощью CSS
?
Вот что у меня получилось, но это далеко от желаемого результата:
Я думал сделать div и зафиксировать его правую границу с центральной осью точки посередине, но это также скрывает зеленый и красный элементы.
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");
body {
height: 100vh;
background: #222;
padding: 0;
margin: 0;
font-family: "Ubuntu Mono";
}
.ypn-logo {
background: green;
display: flex;
flex-direction: row;
position: relative;
align-items: center;
justify-content: center;
padding: 10px;
width: 220px;
height: 220px;
border-radius: 220px;
z-index: 1;
}
.ypn-text {
font-size: 3.5em;
color: white;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
margin-left: -80px;
z-index: 0;
}
.ypn-before {
background: red;
content: "";
position: absolute;
width: 180px;
height: 180px;
border-radius: 180px;
z-index: -1;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
top: 30px;
left: 10px;
}
.ypn-logo:hover>.ypn-before {
left: 50px;
}
.ypn-after {
background: #222;
content: "";
position: absolute;
width: 50px;
height: 50px;
border-radius: 180px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
top: 95px;
left: 130px;
z-index: 1;
}
.ypn-logo:hover>.ypn-after {
left: 60px;
}
.ypn-logo:hover>.ypn-text {
margin-left: 80px;
}
.ypn-after:after {
width: 130px;
background: black;
height: 3em;
content: '';
position: absolute;
left: -100px;
}
<div class="ypn-logo">
<div class="ypn-before"></div>
<div class="ypn-text">YPN</div>
<div class="ypn-after"></div>
</div>
Есть ли способ просто заблокировать текстовый элемент, но не другие элементы?