htmlソースメモ

投稿

7月, 2024の投稿を表示しています

片方の丸が別の丸を追いかけるアニメーションのコード（再実行可能）

7/31/2024 11:35:00 午後

赤丸の速度 (秒): 青丸の速度 (秒): 更新オリジナル：赤丸を青丸が追いかけるアニメーションのコード（正式） <!DOCTYPE html> <html lang="ja"> <head> <title></title> <style> #container { position: relative; height: 300px; width: 300px; border: 1px solid black; } #circle { position: absolute; height: 20px; /* 赤丸のサイズ */ width: 20px; /* 赤丸のサイズ */ background-color: red; border-radius: 50%; ...

赤丸を青丸が追いかけるアニメーションのコード（正式）

7/31/2024 09:13:00 午後

オリジナル：青丸を赤丸が追いかけるアニメーションのコード <!DOCTYPE html> <html> <head> <style> #container { position: relative; height: 300px; width: 300px; border: 1px solid black; } #circle { position: absolute; height: 20px; /* 赤丸のサイズ */ width: 20px; /* 赤丸のサイズ */ background-color: red; border-radius: 50%; transition: top 0.5s, left 0.5s; /* 0.5秒間に移動 */ z-index: 1; /* 赤丸を前面に表示 */ ...

赤丸を青丸が追いかけるアニメーションのコード

7/31/2024 07:34:00 午後

オリジナル：青丸を赤丸が追いかけるアニメーションのコード <!DOCTYPE html> <html> <head> <style> #container { position: relative; height: 300px; width: 300px; border: 1px solid black; } #circle { position: absolute; height: 20px; /* 赤丸のサイズ */ width: 20px; /* 赤丸のサイズ */ background-color: red; border-radius: 50%; transition: top 1s, left 1s; /* 連続的な移動 */ z-index: 2; /* 赤丸を前面に表示 */ ...

青丸を赤丸が追いかけるアニメーションのコード

7/31/2024 11:39:00 午前

<!DOCTYPE html> <html> <head> <style> #container { position: relative; height: 300px; width: 300px; border: 1px solid black; } #circle { position: absolute; height: 20px; /* 赤丸のサイズ */ width: 20px; /* 赤丸のサイズ */ background-color: red; border-radius: 50%; transition: top 1s, left 1s; /* 連続的な移動 */ z-index: 2; /* 赤丸を前面に表示 */ } ...