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%; transition: top 0.5s, left 0.5s; /* 赤丸の速度 */ z-index: 1; /* 赤丸を前面に表示 */ } #circle2 { position: absolute; height: 20px; /* 青丸のサイズ */ width: 20px; /* 青丸のサイズ */ background-color: blue; border-radius: 50%; transition: top 2s, left 2s; /* 青丸の速度 */ z-index: 2; /* 青丸を前面に表示 */ } #line { position: absolute; height: 40px; width: 1px; /* 縦線の幅 */ background-color

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

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; /* 赤丸を前面に表示 */ } #circle2 { position: absolute; height: 20px; /* 青丸のサイズ */ width: 20px; /* 青丸のサイズ */ background-color: blue; border-radius: 50%; transition: top 1s, left 1s; /* 連続的な移動 */ z-index: 2; /* 青丸を前面に表示 */ } #line { position: absolute; height: 40px; width: 1px; /* 縦線の幅 */ background-color: white; right: -1px; /* 右枠に配置 */ top: calc(50% - 20px); /* 上下中央に配置 */ } </style> </head> <body>

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

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; /* 赤丸を前面に表示 */ } #circle2 { position: absolute; height: 20px; /* 青丸のサイズ */ width: 20px; /* 青丸のサイズ */ background-color: blue; border-radius: 50%; transition: top 0.5s, left 0.5s; /* 0.5秒間に移動 */ z-index: 1; /* 青丸を前面に表示 */ } #line { position: absolute; height: 40px; width: 1px; /* 縦線の幅 */ background-color: white; right: -1px; /* 右枠に配置 */ top: calc(50% - 20px); /* 上下中央に配置 */ } </style> </head> <body> &l

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

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; /* 赤丸を前面に表示 */ } #circle2 { position: absolute; height: 20px; /* 青丸のサイズ */ width: 20px; /* 青丸のサイズ */ background-color: blue; border-radius: 50%; transition: top 0.5s, left 0.5s; /* 0.5秒間に移動 */ z-index: 1; /* 青丸を前面に表示 */ } #line { position: absolute; height: 40px; width: 1px; /* 縦線の幅 */ background-color: white; right: -1px; /* 右枠に配置 */ top: calc(50% - 20px); /* 上下中央に配置 */ } </style> </head> <body> <div id="container"