旧站的内容可能已过时。您可以前往“真魂”分站查看本页面，那里的内容将会定期同步。
“帮助:沙盒”的版本间的差异
来自个人维基
小 （→Animated {{tl|Hidebox}}?： subst） |
小 （→Animated {{tl|Hidebox}}?） |
||
| 第9行： | 第9行： | ||
== Animated {{tl|Hidebox}}? == | == Animated {{tl|Hidebox}}? == | ||
| − | {{MywikiParaHack|<html><details class="lnnblog- | + | {{MywikiParaHack|<html><details class="lnnblog-box </html><html>" </html><html>> |
| − | <summary class="lnnblog- | + | <summary class="lnnblog-box-heading" role=button </html><html>></html>hidebox<html></summary></html>}} |
| − | <div class="lnnblog- | + | <div class="lnnblog-box-body"> |
一二三四五，上山打老虎。 | 一二三四五，上山打老虎。 | ||
</div> | </div> | ||
| 第17行： | 第17行： | ||
{{MywikiParaHack|<html><style> | {{MywikiParaHack|<html><style> | ||
| − | .lnnblog- | + | .lnnblog-box { |
max-width: 100%; | max-width: 100%; | ||
} | } | ||
| − | .lnnblog- | + | .lnnblog-box[data-lnnblog-hidebox-state="expand"] { |
overflow: hidden; | overflow: hidden; | ||
} | } | ||
| − | .lnnblog- | + | .lnnblog-box-heading { |
list-style: none; | list-style: none; | ||
position: relative; | position: relative; | ||
padding-left: 1.2rem; | padding-left: 1.2rem; | ||
} | } | ||
| − | .lnnblog- | + | .lnnblog-box-heading::-webkit-details-marker { display: none } |
| − | .lnnblog- | + | .lnnblog-box-heading::before { |
content: ''; | content: ''; | ||
position: absolute; | position: absolute; | ||
| 第40行： | 第40行： | ||
border-left-width: 0.5rem; | border-left-width: 0.5rem; | ||
border-left-color: currentColor; | border-left-color: currentColor; | ||
| − | transform: rotate( | + | transform: rotate(0deg); |
transform-origin: 0.25rem 50%; | transform-origin: 0.25rem 50%; | ||
| − | |||
} | } | ||
| − | .lnnblog- | + | .lnnblog-box[open] > .lnnblog-box-heading::before { |
| − | + | ||
transform: rotate(90deg); | transform: rotate(90deg); | ||
} | } | ||
| − | .lnnblog-hidebox- | + | .lnnblog-box[data-lnnblog-hidebox-state="expand"] > .lnnblog-box-heading::before { |
| − | + | animation: expand 250ms; | |
| + | } | ||
| + | .lnnblog-box[data-lnnblog-hidebox-state="shrink"] > .lnnblog-box-heading::before { | ||
| + | transform: rotate(0); | ||
| + | animation: shrink 250ms; | ||
| + | } | ||
| + | @keyframes expand { | ||
| + | from { transform: rotate(0deg); } | ||
| + | to { transform: rotate(90deg); } | ||
| + | } | ||
| + | @keyframes shrink { | ||
| + | from { transform: rotate(90deg); } | ||
| + | to { transform: rotate(0deg); } | ||
} | } | ||
</style><script> | </style><script> | ||
var animationDuration = 250 | var animationDuration = 250 | ||
| − | $( ".lnnblog- | + | $( ".lnnblog-box-heading" ).on( "click", function ( event ) { |
var $this = $( this ) | var $this = $( this ) | ||
var $parent = $this.parent() | var $parent = $this.parent() | ||
| − | var $body = $this.nextAll( ".lnnblog- | + | var $body = $this.nextAll( ".lnnblog-box-body" ) |
var open = $parent.prop( "open" ) | var open = $parent.prop( "open" ) | ||
| 第66行： | 第76行： | ||
var currentWidth = $parent.width() | var currentWidth = $parent.width() | ||
var currentHeight = $parent.height() | var currentHeight = $parent.height() | ||
| − | $parent.stop( true, true ).prop( "open" | + | $parent.stop( true, true ).prop( "open", true ) |
var targetWidth = $parent.width() | var targetWidth = $parent.width() | ||
var targetHeight = $parent.height() | var targetHeight = $parent.height() | ||
| − | $body.outerWidth( targetWidth | + | $body.outerWidth( targetWidth + 1 ) |
| + | $this.addClass( "lnnblog-hidebox-heading-open" ) | ||
$parent | $parent | ||
.attr( "data-lnnblog-hidebox-state", "expand" ) | .attr( "data-lnnblog-hidebox-state", "expand" ) | ||
| 第99行： | 第110行： | ||
state === "expand" || $body.outerWidth( currentWidth + 1 ) | state === "expand" || $body.outerWidth( currentWidth + 1 ) | ||
| + | $this.removeClass( "lnnblog-hidebox-heading-open" ) | ||
$parent | $parent | ||
.attr( "data-lnnblog-hidebox-state", "shrink" ) | .attr( "data-lnnblog-hidebox-state", "shrink" ) | ||
| 第121行： | 第133行： | ||
} ) | } ) | ||
} | } | ||
| − | return false | + | //return false |
}) | }) | ||
</script></html>}} | </script></html>}} | ||
2022年11月22日 (二) 16:49的版本
lnncrypt
． ． ， ，“”！！（
Animated {{Hidebox}}?
hidebox
一二三四五，上山打老虎。
