LLWiki正在建设中，欢迎加入我们！
“Widget:Sandbox”的版本间差异
跳转到导航
跳转到搜索
小 标签：移动版网页编辑 移动版编辑 |
（//使用页面/文本对比查看器快速编辑） |
||
| （未显示同一用户的23个中间版本） | |||
| 第1行： | 第1行： | ||
<noinclude>{{info|text=这里是Widget沙盒，管理员用户可以使用以下预先准备的框架进行编辑测试。}}</noinclude><includeonly>< |
<noinclude>{{info|text=这里是Widget沙盒，管理员用户可以使用以下预先准备的框架进行编辑测试。}}</noinclude><includeonly><style> |
||
#sif-canvas, #sif-origin, .sif-nine, sif-note { |
|||
//</includeonly>JavaScript脚本：<pre lang="js"> |
|||
box-sizing: border-box; |
|||
// 这里输入代码 |
|||
} |
|||
var timer = setInterval(function() { |
|||
#sif-canvas, .sif-nine, .sif-note { |
|||
if(window.jQuery) { |
|||
border:1px solid; |
|||
clearInterval(timer); |
|||
} |
|||
$('#mw-content-text > .mw-parser-output').append( $('<p>').text('jQuery is loaded!') ); |
|||
#sif-canvas { |
|||
} |
|||
width:400px; |
|||
}, 100); |
|||
height:200px; |
|||
//</pre> |
|||
} |
|||
<includeonly> |
|||
#sif-origin, .sif-nine, .sif-note { |
|||
</script><style> |
|||
border-radius: 50%; |
|||
/* </includeonly>CSS样式表：<pre lang="css"> */ |
|||
} |
|||
/* 这里输入代码 */ |
|||
#sif-origin { |
|||
position: relative; |
|||
/* </pre><includeonly> */ |
|||
width: 50px; |
|||
</style><!--{/if}--></includeonly><noinclude>效果： |
|||
height: 50px; |
|||
{{#widget:sandbox}}</noinclude> |
|||
margin: auto; |
|||
border: 2px solid; |
|||
} |
|||
.sif-nine, .sif-note { |
|||
position: absolute; |
|||
top: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
z-index: -1; |
|||
} |
|||
#sif-canvas:hover .sif-note.pos1 { |
|||
animation: sif1 3s linear forwards; |
|||
} |
|||
#sif-canvas:hover .sif-note.pos2 { |
|||
animation: sif2 3s linear forwards; |
|||
} |
|||
#sif-canvas:hover .sif-note.pos3 { |
|||
animation: sif3 3s linear forwards; |
|||
} |
|||
#sif-canvas:hover .sif-note.pos4 { |
|||
animation: sif4 3s linear forwards; |
|||
} |
|||
#sif-canvas:hover .sif-note.pos5 { |
|||
animation: sif5 3s linear forwards; |
|||
} |
|||
#sif-canvas:hover .sif-note.pos6 { |
|||
animation: sif6 3s linear forwards; |
|||
} |
|||
#sif-canvas:hover .sif-note.pos7 { |
|||
animation: sif7 3s linear forwards; |
|||
} |
|||
#sif-canvas:hover .sif-note.pos8 { |
|||
animation: sif8 3s linear forwards; |
|||
} |
|||
#sif-canvas:hover .sif-note.pos9 { |
|||
animation: sif9 3s linear forwards; |
|||
} |
|||
@keyframes sif1 { |
|||
0% { |
|||
transform: none; |
|||
} |
|||
99% { |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
transform: translate(-150px, 0); |
|||
opacity: 0; |
|||
} |
|||
} |
|||
@keyframes sif2 { |
|||
0% { |
|||
transform: none; |
|||
} |
|||
99% { |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
transform: translate(-138.582px, 57.403px); |
|||
opacity: 0; |
|||
} |
|||
} |
|||
@keyframes sif3 { |
|||
0% { |
|||
transform: none; |
|||
} |
|||
99% { |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
transform: translate(-106.066px, 106.066px); |
|||
opacity: 0; |
|||
} |
|||
} |
|||
@keyframes sif4 { |
|||
0% { |
|||
transform: none; |
|||
} |
|||
99% { |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
transform: translate(-57.403px, 138.582px); |
|||
opacity: 0; |
|||
} |
|||
} |
|||
@keyframes sif5 { |
|||
0% { |
|||
transform: none; |
|||
} |
|||
99% { |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
transform: translate(0, 150px); |
|||
opacity: 0; |
|||
} |
|||
} |
|||
@keyframes sif6 { |
|||
0% { |
|||
transform: none; |
|||
} |
|||
99% { |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
transform: translate(57.403px, 138.582px); |
|||
opacity: 0; |
|||
} |
|||
} |
|||
@keyframes sif7 { |
|||
0% { |
|||
transform: none; |
|||
} |
|||
99% { |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
transform: translate(106.066px, 106.066px); |
|||
opacity: 0; |
|||
} |
|||
} |
|||
@keyframes sif8 { |
|||
0% { |
|||
transform: none; |
|||
} |
|||
99% { |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
transform: translate(138.582px, 57.403px); |
|||
opacity: 0; |
|||
} |
|||
} |
|||
@keyframes sif9 { |
|||
0% { |
|||
transform: none; |
|||
} |
|||
99% { |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
transform: translate(150px, 0); |
|||
opacity: 0; |
|||
} |
|||
} |
|||
</style> |
|||
<script> |
|||
window.addEventListener('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日 (四) 13:23的最新版本
|
这里是Widget沙盒，管理员用户可以使用以下预先准备的框架进行编辑测试。 |