《CSS》背景だけをアニメーションで回転させる
公開日:2025年01月28日 最終更新日:2025年1月28日
Ad
疑似要素(::before)を使用して目立たせたい要素の背景だけを回転させます。
背景は回転がわかりやすいようにスターバーストの画像にしました。
DEMO
SALE
HTML
<div class="rotate">
<p class="rotate-text">SALE</p>
</div>
CSS
.rotate {
align-items: center;
display: flex;
height: 200px;
justify-content: center;
position: relative;
width: 200px;
}
.rotate::before {
animation: 20s 0s rotate linear infinite;
background: url('https://blog.grinee.net/demo/images/starburst.png') center center / 200px auto no-repeat;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
.rotate-text {
color: #fff;
font-size: 30px;
position: relative;
z-index: 1;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}