くるっと回るテキスト
ホバーCSSのみテキスト回転系
Text
マウスを乗せ続けているとテキストが1つずつ下から上に回転したように移動するアニメーションです。
実装のポイント
回転して下から出現するテキストはtext-shadowを使って分身させています。--indexというCSS変数をHTMLに振ることで、単一のCSSコードでアニメーションの遅延を実現できあｍす。
マウスがさっと通り過ぎてしまうとあまり効果がわからないのが難点…
コード例
HTML
<p class="sampleText">
<span style="--index: 0" class="charactor">T</span
><span style="--index: 1" class="charactor">e</span
><span style="--index: 2" class="charactor">x</span
><span style="--index: 3" class="charactor">t</span>
</p>
CSS
.sampleText {
--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
overflow: hidden;
line-height: 1;
transition: 0.8s var(--ease-out-cubic) calc(0.1s * var(--index));
&:hover {
.charactor {
translate: 0 -1em;
}
}
}
.charactor {
display: inline-block;
translate: 0 0;
text-shadow: 0 1em 0 currentColor;
}