[{"data":1,"prerenderedAt":661},["ShallowReactive",2],{"article-aurora-ring-art":3},{"id":4,"title":5,"body":6,"date":653,"description":654,"extension":655,"meta":656,"navigation":277,"path":657,"seo":658,"stem":659,"__hash__":660},"articles\u002Farticles\u002Faurora-ring-art.md","CSS @property と conic-gradient で描くオーロラリング",{"type":7,"value":8,"toc":645},"minimark",[9,13,17,20,23,27,52,117,131,133,137,150,320,325,327,331,343,396,412,414,418,432,550,553,555,558,633,641],[10,11,12],"h2",{"id":12},"作品",[14,15,16],"p",{},"4 つのリングがそれぞれ異なる速度・方向で回転し続けます。\nJavaScript は一切使わず、CSS だけで動いています。",[18,19],"aurora-ring",{},[21,22],"hr",{},[10,24,26],{"id":25},"property-とは","@property とは",[14,28,29,30,34,35,38,39,42,43,46,47,51],{},"通常の CSS カスタムプロパティ（",[31,32,33],"code",{},"--my-color: red"," のような変数）は ",[31,36,37],{},"transition"," や ",[31,40,41],{},"animation"," で補間できません。\n",[31,44,45],{},"@property"," を使うと型と初期値を宣言でき、",[48,49,50],"strong",{},"アニメーション可能なカスタムプロパティ","になります。",[53,54,59],"pre",{"className":55,"code":56,"language":57,"meta":58,"style":58},"language-css shiki shiki-themes github-light github-dark","@property --angle {\n  syntax: '\u003Cangle>';   \u002F* 型: 角度 *\u002F\n  inherits: false;     \u002F* 継承しない *\u002F\n  initial-value: 0deg; \u002F* 初期値 *\u002F\n}\n","css","",[31,60,61,73,89,98,111],{"__ignoreMap":58},[62,63,66,69],"span",{"class":64,"line":65},"line",1,[62,67,45],{"class":68},"szBVR",[62,70,72],{"class":71},"sVt8B"," --angle {\n",[62,74,76,79,82,85],{"class":64,"line":75},2,[62,77,78],{"class":71},"  syntax: '\u003Cangle",[62,80,81],{"class":68},">",[62,83,84],{"class":71},"';   ",[62,86,88],{"class":87},"sJ8bj","\u002F* 型: 角度 *\u002F\n",[62,90,92,95],{"class":64,"line":91},3,[62,93,94],{"class":71},"  inherits: false;     ",[62,96,97],{"class":87},"\u002F* 継承しない *\u002F\n",[62,99,101,105,108],{"class":64,"line":100},4,[62,102,104],{"class":103},"s9eBZ","  initial-value",[62,106,107],{"class":71},": 0deg; ",[62,109,110],{"class":87},"\u002F* 初期値 *\u002F\n",[62,112,114],{"class":64,"line":113},5,[62,115,116],{"class":71},"}\n",[14,118,119,122,123,126,127,130],{},[31,120,121],{},"syntax: '\u003Cangle>'"," と宣言することで、ブラウザが ",[31,124,125],{},"0deg"," → ",[31,128,129],{},"360deg"," の間を補間できるようになります。",[21,132],{},[10,134,136],{"id":135},"conic-gradient-の開始角を回転させる","conic-gradient の開始角を回転させる",[14,138,139,142,143,146,147,149],{},[31,140,141],{},"conic-gradient(from \u003Cangle>, ...)"," の ",[31,144,145],{},"from"," に ",[31,148,45],{}," で定義したカスタムプロパティを使います。",[53,151,153],{"className":55,"code":152,"language":57,"meta":58,"style":58},".ring {\n  background: conic-gradient(\n    from var(--a1),       \u002F* ← この角度をアニメーション *\u002F\n    transparent 0%,\n    #00DC82 15%,\n    transparent 45%\n  );\n  animation: spin 4s linear infinite;\n}\n\n@keyframes spin {\n  to { --a1: 360deg; }  \u002F* 0deg → 360deg へ補間 *\u002F\n}\n",[31,154,155,164,179,200,214,226,237,243,267,272,279,290,315],{"__ignoreMap":58},[62,156,157,161],{"class":64,"line":65},[62,158,160],{"class":159},"sScJk",".ring",[62,162,163],{"class":71}," {\n",[62,165,166,170,173,176],{"class":64,"line":75},[62,167,169],{"class":168},"sj4cs","  background",[62,171,172],{"class":71},": ",[62,174,175],{"class":168},"conic-gradient",[62,177,178],{"class":71},"(\n",[62,180,181,184,187,190,194,197],{"class":64,"line":91},[62,182,183],{"class":68},"    from",[62,185,186],{"class":168}," var",[62,188,189],{"class":71},"(",[62,191,193],{"class":192},"s4XuR","--a1",[62,195,196],{"class":71},"),       ",[62,198,199],{"class":87},"\u002F* ← この角度をアニメーション *\u002F\n",[62,201,202,205,208,211],{"class":64,"line":100},[62,203,204],{"class":168},"    transparent",[62,206,207],{"class":168}," 0",[62,209,210],{"class":68},"%",[62,212,213],{"class":71},",\n",[62,215,216,219,222,224],{"class":64,"line":113},[62,217,218],{"class":168},"    #00DC82",[62,220,221],{"class":168}," 15",[62,223,210],{"class":68},[62,225,213],{"class":71},[62,227,229,231,234],{"class":64,"line":228},6,[62,230,204],{"class":168},[62,232,233],{"class":168}," 45",[62,235,236],{"class":68},"%\n",[62,238,240],{"class":64,"line":239},7,[62,241,242],{"class":71},"  );\n",[62,244,246,249,252,255,258,261,264],{"class":64,"line":245},8,[62,247,248],{"class":168},"  animation",[62,250,251],{"class":71},": spin ",[62,253,254],{"class":168},"4",[62,256,257],{"class":68},"s",[62,259,260],{"class":168}," linear",[62,262,263],{"class":168}," infinite",[62,265,266],{"class":71},";\n",[62,268,270],{"class":64,"line":269},9,[62,271,116],{"class":71},[62,273,275],{"class":64,"line":274},10,[62,276,278],{"emptyLinePlaceholder":277},true,"\n",[62,280,282,285,288],{"class":64,"line":281},11,[62,283,284],{"class":68},"@keyframes",[62,286,287],{"class":192}," spin",[62,289,163],{"class":71},[62,291,293,296,299,301,303,306,309,312],{"class":64,"line":292},12,[62,294,295],{"class":159},"  to",[62,297,298],{"class":71}," { ",[62,300,193],{"class":192},[62,302,172],{"class":71},[62,304,305],{"class":168},"360",[62,307,308],{"class":68},"deg",[62,310,311],{"class":71},"; }  ",[62,313,314],{"class":87},"\u002F* 0deg → 360deg へ補間 *\u002F\n",[62,316,318],{"class":64,"line":317},13,[62,319,116],{"class":71},[14,321,322,324],{},[31,323,193],{}," が 0° から 360° へ変化するにつれ、グラデーションの始点がぐるりと一周します。\nこれが「グラデーションが回転する」ように見える仕組みです。",[21,326],{},[10,328,330],{"id":329},"mask-image-でリング状に切り抜く","mask-image でリング状に切り抜く",[14,332,333,335,336,146,339,342],{},[31,334,175],{}," は円形全体を塗るため、そのままでは円盤になってしまいます。\n",[31,337,338],{},"mask-image",[31,340,341],{},"radial-gradient","（中心と外縁を透明に）を指定し、リング状に切り抜きます。",[53,344,346],{"className":55,"code":345,"language":57,"meta":58,"style":58},"mask-image: radial-gradient(\n  circle,\n  transparent 68%,  \u002F* 内側: 透明 → リングの穴 *\u002F\n  black       72%,  \u002F* ここからリングの帯 *\u002F\n  black       92%,\n  transparent 96%   \u002F* 外縁: フェードアウト *\u002F\n);\n",[31,347,348,355,362,370,378,383,391],{"__ignoreMap":58},[62,349,350,352],{"class":64,"line":65},[62,351,338],{"class":103},[62,353,354],{"class":71},": radial-gradient(\n",[62,356,357,360],{"class":64,"line":75},[62,358,359],{"class":103},"  circle",[62,361,213],{"class":71},[62,363,364,367],{"class":64,"line":91},[62,365,366],{"class":71},"  transparent 68%,  ",[62,368,369],{"class":87},"\u002F* 内側: 透明 → リングの穴 *\u002F\n",[62,371,372,375],{"class":64,"line":100},[62,373,374],{"class":71},"  black       72%,  ",[62,376,377],{"class":87},"\u002F* ここからリングの帯 *\u002F\n",[62,379,380],{"class":64,"line":113},[62,381,382],{"class":71},"  black       92%,\n",[62,384,385,388],{"class":64,"line":228},[62,386,387],{"class":71},"  transparent 96%   ",[62,389,390],{"class":87},"\u002F* 外縁: フェードアウト *\u002F\n",[62,392,393],{"class":64,"line":239},[62,394,395],{"class":71},");\n",[397,398,400],"callout",{"type":399},"tip",[14,401,402,404,405,408,409,411],{},[31,403,338],{}," は ",[31,406,407],{},"-webkit-mask-image"," としても指定が必要なブラウザがあります。モダンブラウザでは ",[31,410,338],{}," のみで動作します。",[21,413],{},[10,415,417],{"id":416},"_4-つのリングに異なる動きを与える","4 つのリングに異なる動きを与える",[14,419,420,421,423,424,427,428,431],{},"各リングに別々の ",[31,422,45],{}," 変数と ",[31,425,426],{},"animation-duration"," を割り当てます。\n逆回転は ",[31,429,430],{},"animation-direction: reverse"," で実現します。",[53,433,435],{"className":55,"code":434,"language":57,"meta":58,"style":58},"\u002F* 内側から外側へ: 速い→遅い *\u002F\n.ring-1 { animation: spin1  4s linear infinite; }         \u002F* 速い *\u002F\n.ring-2 { animation: spin2  7s linear infinite; }         \u002F* 中速 *\u002F\n.ring-3 { animation: spin3 11s linear infinite; }         \u002F* 遅い *\u002F\n.ring-4 { animation: spin4 17s linear infinite reverse; } \u002F* 最遅・逆回転 *\u002F\n",[31,436,437,442,468,494,520],{"__ignoreMap":58},[62,438,439],{"class":64,"line":65},[62,440,441],{"class":87},"\u002F* 内側から外側へ: 速い→遅い *\u002F\n",[62,443,444,447,449,451,454,456,458,460,462,465],{"class":64,"line":75},[62,445,446],{"class":159},".ring-1",[62,448,298],{"class":71},[62,450,41],{"class":168},[62,452,453],{"class":71},": spin1  ",[62,455,254],{"class":168},[62,457,257],{"class":68},[62,459,260],{"class":168},[62,461,263],{"class":168},[62,463,464],{"class":71},"; }         ",[62,466,467],{"class":87},"\u002F* 速い *\u002F\n",[62,469,470,473,475,477,480,483,485,487,489,491],{"class":64,"line":91},[62,471,472],{"class":159},".ring-2",[62,474,298],{"class":71},[62,476,41],{"class":168},[62,478,479],{"class":71},": spin2  ",[62,481,482],{"class":168},"7",[62,484,257],{"class":68},[62,486,260],{"class":168},[62,488,263],{"class":168},[62,490,464],{"class":71},[62,492,493],{"class":87},"\u002F* 中速 *\u002F\n",[62,495,496,499,501,503,506,509,511,513,515,517],{"class":64,"line":100},[62,497,498],{"class":159},".ring-3",[62,500,298],{"class":71},[62,502,41],{"class":168},[62,504,505],{"class":71},": spin3 ",[62,507,508],{"class":168},"11",[62,510,257],{"class":68},[62,512,260],{"class":168},[62,514,263],{"class":168},[62,516,464],{"class":71},[62,518,519],{"class":87},"\u002F* 遅い *\u002F\n",[62,521,522,525,527,529,532,535,537,539,541,544,547],{"class":64,"line":113},[62,523,524],{"class":159},".ring-4",[62,526,298],{"class":71},[62,528,41],{"class":168},[62,530,531],{"class":71},": spin4 ",[62,533,534],{"class":168},"17",[62,536,257],{"class":68},[62,538,260],{"class":168},[62,540,263],{"class":168},[62,542,543],{"class":168}," reverse",[62,545,546],{"class":71},"; } ",[62,548,549],{"class":87},"\u002F* 最遅・逆回転 *\u002F\n",[14,551,552],{},"回転速度の比（4:7:11:17）を素数に近い値にすることで、\n4つが元の配置に戻る周期が極めて長くなり、飽きない動きになります。",[21,554],{},[10,556,557],{"id":557},"技術比較",[559,560,561,580],"table",{},[562,563,564],"thead",{},[565,566,567,571,574,577],"tr",{},[568,569,570],"th",{},"手法",[568,572,573],{},"JS 必要",[568,575,576],{},"動き",[568,578,579],{},"向いている表現",[581,582,583,598,612],"tbody",{},[565,584,585,589,592,595],{},[586,587,588],"td",{},"CSS animation + transform",[586,590,591],{},"不要",[586,593,594],{},"位置・スケール",[586,596,597],{},"移動・回転",[565,599,600,603,606,609],{},[586,601,602],{},"Canvas + rAF",[586,604,605],{},"必要",[586,607,608],{},"無制限",[586,610,611],{},"粒子・曲線",[565,613,614,619,623,628],{},[586,615,616],{},[48,617,618],{},"CSS @property",[586,620,621],{},[48,622,591],{},[586,624,625],{},[48,626,627],{},"値の補間",[586,629,630],{},[48,631,632],{},"グラデーション変化・色変化",[397,634,636],{"type":635},"warning",[14,637,638,640],{},[31,639,45],{}," は Safari 16.4 以降、Chrome 85 以降で対応しています。未対応ブラウザではアニメーションが動かず静止します。",[642,643,644],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":58,"searchDepth":75,"depth":75,"links":646},[647,648,649,650,651,652],{"id":12,"depth":75,"text":12},{"id":25,"depth":75,"text":26},{"id":135,"depth":75,"text":136},{"id":329,"depth":75,"text":330},{"id":416,"depth":75,"text":417},{"id":557,"depth":75,"text":557},"2026-05-01T23:00:00+09:00","CSS @property でカスタムプロパティをアニメーション可能にし、conic-gradient の回転でオーロラ状に光るリングを純粋 CSS だけで実現します。","md",{},"\u002Farticles\u002Faurora-ring-art",{"title":5,"description":654},"articles\u002Faurora-ring-art","IqmsV_P1x0f_xSUeOA_3ArsPLtqtktcZy6WWnyVOUMU",1777568741982]