HTMLとCSSだけでテキストブロックを前回とは違い、画面全体を使ってグルグル回転させてみました。
HTMLとCSSの様々な表現 08 HTMLとCSSだけでテキストをグルグル回転 2024/02/13
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Rotation Example</title>
<style>
body, html {
background-color: black;
}
@keyframes rotate {
/* 0%から100%までのアニメーションの
キーフレームを指定します */
from {
transform: rotate(0deg); /* 初期の回転角度 */
}
to {
transform: rotate(360deg); /* 最終的な回転角度 */
}
}
.rotate {
animation: rotate 5s linear infinite;
/* アニメーションの設定 */
margin: 100px auto;
color: White;
}
</style>
</head>
<body background="Black">
<div class="rotate">
昔々、あるところに、<br>
お爺さんとお婆さんが住んでいました。<br>
お爺さんは山へ芝刈りに、<br>
お婆さんは川へ洗濯に行きました。<br>
お婆さんが川で洗濯をしていると、<br>
ドンブラコ、ドンブラコと、<br>
大きな桃が流れてきました。
</div>
</body>
</html>
<!-- index.html -->
こんな感じです。今回もUD的には好ましくないですね。
