LLWiki正在建設中,歡迎加入我們!
「Widget:Sandbox」修訂間的差異
跳至導覽
跳至搜尋
(//使用页面/文本对比查看器快速编辑) |
(//使用页面/文本对比查看器快速编辑) |
||
第1行: | 第1行: | ||
<noinclude>{{info|text=这里是Widget沙盒,管理员用户可以使用以下预先准备的框架进行编辑测试。}}</noinclude><includeonly> |
<noinclude>{{info|text=这里是Widget沙盒,管理员用户可以使用以下预先准备的框架进行编辑测试。}}</noinclude><includeonly><!--{if !isset($wgSandbox) || !$wgSandbox}--><!--{assign var="wgSandbox" value=true scope="global"}--><style> |
||
/* </includeonly>CSS样式表:<pre lang="css"> */ |
|||
{{#widget:sandbox|x=中文}}</noinclude> |
|||
#sif-canvas, #sif-origin, .sif-nine, sif-note { |
|||
box-sizing: border-box; |
|||
} |
|||
#sif-canvas, .sif-nine, .sif-note { |
|||
border:1px solid; |
|||
} |
|||
#sif-canvas { |
|||
width:400px; |
|||
height:200px; |
|||
} |
|||
#sif-origin, .sif-nine, .sif-note { |
|||
border-radius: 50%; |
|||
} |
|||
#sif-origin { |
|||
position: relative; |
|||
width: 50px; |
|||
height: 50px; |
|||
margin: auto; |
|||
border: 2px solid; |
|||
} |
|||
.sif-nine, .sif-note { |
|||
position: absolute; |
|||
inset: 0; |
|||
z-index: -1; |
|||
} |
|||
#sif-canvas:hover .sif-note.pos1 { |
|||
animation: sif1 3s linear; |
|||
} |
|||
#sif-canvas:hover .sif-note.pos2 { |
|||
animation: sif2 3s linear; |
|||
} |
|||
#sif-canvas:hover .sif-note.pos3 { |
|||
animation: sif3 3s linear; |
|||
} |
|||
#sif-canvas:hover .sif-note.pos4 { |
|||
animation: sif4 3s linear; |
|||
} |
|||
#sif-canvas:hover .sif-note.pos5 { |
|||
animation: sif5 3s linear; |
|||
} |
|||
#sif-canvas:hover .sif-note.pos6 { |
|||
animation: sif6 3s linear; |
|||
} |
|||
#sif-canvas:hover .sif-note.pos7 { |
|||
animation: sif7 3s linear; |
|||
} |
|||
#sif-canvas:hover .sif-note.pos8 { |
|||
animation: sif8 3s linear; |
|||
} |
|||
#sif-canvas:hover .sif-note.pos9 { |
|||
animation: sif9 3s linear; |
|||
} |
|||
@keyframe sif1 { |
|||
from { |
|||
transform: none; |
|||
} |
|||
to { |
|||
transform: translate(-150px, 0); |
|||
} |
|||
} |
|||
@keyframe sif2 { |
|||
from { |
|||
transform: none; |
|||
} |
|||
to { |
|||
transform: translate(-138.582px, 57.403px); |
|||
} |
|||
} |
|||
@keyframe sif3 { |
|||
from { |
|||
transform: none; |
|||
} |
|||
to { |
|||
transform: translate(-106.066px, 106.066px); |
|||
} |
|||
} |
|||
@keyframe sif4 { |
|||
from { |
|||
transform: none; |
|||
} |
|||
to { |
|||
transform: translate(-57.403px, 138.582px); |
|||
} |
|||
} |
|||
@keyframe sif5 { |
|||
from { |
|||
transform: none; |
|||
} |
|||
to { |
|||
transform: translate(0, 150px); |
|||
} |
|||
} |
|||
@keyframe sif6 { |
|||
from { |
|||
transform: none; |
|||
} |
|||
to { |
|||
transform: translate(57.403px, 138.582px); |
|||
} |
|||
} |
|||
@keyframe sif7 { |
|||
from { |
|||
transform: none; |
|||
} |
|||
to { |
|||
transform: translate(106.066px, 106.066px); |
|||
} |
|||
} |
|||
@keyframe sif8 { |
|||
from { |
|||
transform: none; |
|||
} |
|||
to { |
|||
transform: translate(138.582px, 57.403px); |
|||
} |
|||
} |
|||
@keyframe sif9 { |
|||
from { |
|||
transform: none; |
|||
} |
|||
to { |
|||
transform: translate(150px, 0); |
|||
} |
|||
} |
|||
/* </pre><includeonly> */ |
|||
</style><script> |
|||
window.addEventListern('jquery', () => { |
|||
const $circle = $('<div>', {class: 'sif-note pos5'}); |
|||
for (let i = 0; i < 1000; i++) { |
|||
$circle.clone().appendTo('#sif-origin').css('animation-delay', `${i}s`); |
|||
} |
|||
}); |
|||
</script></includeonly> |
於 2022年4月21日 (四) 12:28 的修訂
這裏是Widget沙盒,管理員用戶可以使用以下預先準備的框架進行編輯測試。 |
CSS樣式表:
*/
#sif-canvas, #sif-origin, .sif-nine, sif-note {
box-sizing: border-box;
}
#sif-canvas, .sif-nine, .sif-note {
border:1px solid;
}
#sif-canvas {
width:400px;
height:200px;
}
#sif-origin, .sif-nine, .sif-note {
border-radius: 50%;
}
#sif-origin {
position: relative;
width: 50px;
height: 50px;
margin: auto;
border: 2px solid;
}
.sif-nine, .sif-note {
position: absolute;
inset: 0;
z-index: -1;
}
#sif-canvas:hover .sif-note.pos1 {
animation: sif1 3s linear;
}
#sif-canvas:hover .sif-note.pos2 {
animation: sif2 3s linear;
}
#sif-canvas:hover .sif-note.pos3 {
animation: sif3 3s linear;
}
#sif-canvas:hover .sif-note.pos4 {
animation: sif4 3s linear;
}
#sif-canvas:hover .sif-note.pos5 {
animation: sif5 3s linear;
}
#sif-canvas:hover .sif-note.pos6 {
animation: sif6 3s linear;
}
#sif-canvas:hover .sif-note.pos7 {
animation: sif7 3s linear;
}
#sif-canvas:hover .sif-note.pos8 {
animation: sif8 3s linear;
}
#sif-canvas:hover .sif-note.pos9 {
animation: sif9 3s linear;
}
@keyframe sif1 {
from {
transform: none;
}
to {
transform: translate(-150px, 0);
}
}
@keyframe sif2 {
from {
transform: none;
}
to {
transform: translate(-138.582px, 57.403px);
}
}
@keyframe sif3 {
from {
transform: none;
}
to {
transform: translate(-106.066px, 106.066px);
}
}
@keyframe sif4 {
from {
transform: none;
}
to {
transform: translate(-57.403px, 138.582px);
}
}
@keyframe sif5 {
from {
transform: none;
}
to {
transform: translate(0, 150px);
}
}
@keyframe sif6 {
from {
transform: none;
}
to {
transform: translate(57.403px, 138.582px);
}
}
@keyframe sif7 {
from {
transform: none;
}
to {
transform: translate(106.066px, 106.066px);
}
}
@keyframe sif8 {
from {
transform: none;
}
to {
transform: translate(138.582px, 57.403px);
}
}
@keyframe sif9 {
from {
transform: none;
}
to {
transform: translate(150px, 0);
}
}
/*