查看“帮助:电影演职员表”的源代码


<templatestyles src="内容向上轮播/style.css" />
=== 描述 ===
此片段用于生成一个移动的滚动，就像电影演职员表一样向上移动。<br>
参考
 https://www.mediawiki.org/wiki/Snippets/Movie_Credits

=== 可视化示例 ===
不幸的是，由于这是一个 css 动画效果，因此当页面上不包含 css 时无法显示。<br>
<big>但是新版mediawiki增加了过滤css更严格了只能添加到全站css里除非站点大量修改过。</big>

=== 用法 ===
使用超级，超级简单。只需在除数之后放置文本、照片、画廊、视频等即可。在CSS中，只需决定动画将如何运行。下面的CSS是用Mediawiki变量编写的。除非您将变量更改为实际数字、单词等，否则 CSS 将不起作用。如果您使用的是每页 css 扩展名，您还可以在模板中保留带有变量的 css。

“sealoff”除数对于将内容保留在正常的wiki页面中很重要。没有它，就会发生奇怪的事情，例如让文本在wiki预览功能下方和后面滚动。

例：
<pre>
<div class="sealoff">
<div class="wrapper">
	
这里是内容

</div></div>
</pre>

<div class="sealoff">
<div class="wrapper">
	
<big>
<h2>李白《行路难·其一》</h2>
金樽清酒斗十千，玉盘珍羞直万钱。<br>
停杯投箸不能食，拔剑四顾心茫然。<br>
欲渡黄河冰塞川，将登太行雪满山。<br>
闲来垂钓碧溪上，忽复乘舟梦日边。<br>
行路难，行路难，多歧路，今安在？<br>
长风破浪会有时，直挂云帆济沧海。<br>
</big>
</div></div>


=== CSS ===
<pre>
/* CSS Movie Credits
 * 
 * Original version found at: http://codepen.io/reejosamuel/pen/ALjcr
 * current version crafted together by [[User:Christharp]] to work inside Mediawiki..
 */
.sealoff {
postion:relative;
width:100%;
height:{{{height of seal}}}px;
overflow:hidden;
}
.wrapper {
  position: relative;
  top: 100%;
  left: 0%;
  width: 100%;
  animation: {{{animation seconds}}}s credits linear {{{How often}}};
  animation-direction:{{{direction}}};
  text-align: center; /* 增加了居中 */
}

@keyframes credits {
  0% {
    top: 100%;
  }
  100% {
    top: -{{{Negative Top}}}%;
  }
}
</pre>
=== 笔记 ===
显示高度等于卷轴的可见部分及其在页面上占用的空间量。

动画秒数等于滚动的持续时间（谷歌：动画持续时间）(Google: animation-duration)

频率等于动画发生的次数（Google：animation-iteration-count）

方向是动画所采用的方向。（谷歌：动画方向）(Google:animation-direction)

=== 已经写好的css ===
可以根据需要修改。注意这个代码只适合一些短的文字如果需要图片视频等请增加高度，时间等。
=== 图片示例 ===

<div class="sealoff">
<div class="wrapper">
	
[[File:Xctu.png]]<br>
[[File:测试1.jpg]]<br>
[[File:Zara05.png]]<br>


</div></div>
<pre>
/* 电影演职员表一样文字向上移动 */
/* CSS Movie Credits
 * 
 * Original version found at: http://codepen.io/reejosamuel/pen/ALjcr
 * current version crafted together by [[User:Christharp]] to work inside Mediawiki..
 */
.sealoff {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.wrapper {
  position: relative;
  top: 100%;
  left: 0%;
  width: 100%;
  animation: 10s credits linear infinite;
  animation-direction: normal;
  text-align: center;
}

@keyframes credits {
  0% {
    top: 100%;
  }
  100% {
    top: -200%;
  }
}


</pre>