_icon.png
){kind=icon}
_wordmark.png)
帮助:沙盒：修订间差异
来自 LNN的:not(博客)？
更多操作
小 →Animated {{tl|Hidebox}}?： subst |
|||
| 第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
一二三四五，上山打老虎。