CSSのアニメーションを使ったRadiateOut

Question

私はすべてのCSSウィザードに質問がありました。私は以前見たことがないこのCSSアニメーション効果に出くわし、誰かがそれがどのように行われたかを知っていたのだろうか？ https://www.landr.com/en

好奇心が強い。

敬具、 フィリップ

Answer 1

は、それが成長し、フェードアウトさせるtransform: scale()とopacityを使用し、その後、出て放射する円を描くように擬似要素を使用します。 animation

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    cursor: pointer; 
 
    position: relative; 
 
} 
 

 
div::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
} 
 

 
div:hover::after { 
 
    animation: radiate .5s; 
 
} 
 

 
div, div::after { 
 
    background: #09c; 
 
    border-radius: 50%; 
 
} 
 

 
@keyframes radiate { 
 
    to { 
 
    transform: scale(1.5); 
 
    opacity: 0; 
 
    } 
 
}

<div></div>

を使用して、またはtransition

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    cursor: pointer; 
 
    position: relative; 
 
} 
 

 
div::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
} 
 

 
div:hover::after { 
 
    transform: scale(1.5); 
 
    opacity: 0; 
 
    transition: transform .5s, opacity .5s; 
 
} 
 

 
div, div::after { 
 
    background: #09c; 
 
    border-radius: 50%; 
 
}

<div></div>