固定値
Coddyの「流れる雲 - HTML/CSS/JSプロジェクト」コースのレッスン 10/18。
雲を動かしましょう!
チャレンジ
簡単雲を動かし始める前に、雲の位置とサイズを固定しましょう。
雲にランダムな位置とサイズを設定しているコードをコメントアウトしてください。
JSファイルで、cloud要素をターゲットにして以下を行ってください:
leftスタイルプロパティを200pxに設定します。topスタイルプロパティを200pxに設定します。transformスタイルプロパティをscale(0.5)に設定します。
また、transitionスタイルプロパティを"all linear 3s"に設定してください。これは後で雲をアニメーションさせるのに役立ちます!
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Write HTML code here -->
<script src="script.js"></script>
</body>
</html>