動画エンディングエフェクトの実装_html/css_WEB-ITnose-htmlチュートリアル-php.cn

動画エンディングエフェクトの実装_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:14:53

オリジナル

1200 人が閲覧しました

经常我们看电影都会看到电影结束后会出现一段介绍这个电影的导演、编剧、主演、友情出演等等一些电影信息的滚动字幕，那么那个效果可以用html+css+div实现。具体实现代码如下：

html代码：

<div id="movie">  <div id="movieup"></div><br />   <marquee direction="up" height=400px;>     <p>导演：***</p>     <p>编剧：***</p>     <p>主演：**** ** *** </p>     <p>友情出演：*** *** **</p><br />   </marquee><br />  <div id="moviedown"></div><br /></div>

ログイン後にコピー

　　滚动标签：要滚动的文字/图像

下面是我对滚动标签中的一些常见属性的罗列：

滚动方向 direction=up/down/left/right （向上/向下/向左/向右）

滚动速度 scrollamount=4/5/6 （4/5/6是比较适合大家使用的三个滚动速度）

滚动行为 behavior=scroll/slide/alternate（循环滚动/只滚动一次/来回滚动）

滚动次数 loop=3(循环三次)

滚动延时 scrolldelay=1000(1000毫秒即一秒)

限制滚动区域大小width=”” height="" bgcolor=""（用来显示出可以滚动的区域）

停止与滚动效果Onmouseover=this.stop() Onmouseout=this.start()

(鼠标放上面滚动效果停止，鼠标离开滚动继续)

注：以上都可作为标签对里的开始标签里的属性添加想要的效果

css:

 #movie  {    width:360px;    height:400px;    background:url("F:\images\1.jpg");    border:1px solid #000000;    text-align:center;    margin:auto;    position:relative;  }  #movieup  {    width:100%;    height:40px;    background:#000000;    position:absolute;    top:0px;    }  #moviedown  {     width:100%;     height:40px;     background:#000000;     position:absolute;     bottom:0px;  }

ログイン後にコピー

我本来把滚动效果录成微视频准备给大家看看的，但不知道是没这功能还是有点新手上路没找到在哪里上传本地视频，只能暂时先上传静态照片了，知道它是向上滚动的字幕即可，这只是滚动标签的一个简单应用，看到该篇随笔的园友们可以增添更多样式使它更加丰富多彩。