怎么用html+css+div實現電影結束效果

這篇文章主要介紹“怎么用html+css+div實現電影結束效果”，在日常操作中，相信很多人在怎么用html+css+div實現電影結束效果問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用html+css+div實現電影結束效果”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

經常我們看電影都會看到電影結束后會出現一段介紹這個電影的導演、編劇、主演、友情出演等等一些電影信息的滾動字幕，那么那個效果可以用html+css+div實現。具體實現代碼如下：

html代碼：

XML/HTML Code復制內容到剪貼板

1. <div id="movie">  

2.   

3.   <div id="movieup"></div><br>  

4.   

5.    <marquee direction="up" height=400px;>  

6.   

7.      <p>導演：***</p>  

8.   

9.      <p>編劇：***</p>  

10.   

11.      <p>主演：**** ** *** </p>  

12.   

13.      <p>友情出演：*** *** **</p><br>   </marquee><br>  

14.   

15.   <div id="moviedown"></div><br></div>  

滾動標簽：<marquee>要滾動的文字/圖像<img src=””>  </marquee>

下面是我對滾動標簽中的一些常見屬性的羅列：

滾動方向 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()

(鼠標放上面滾動效果停止，鼠標離開滾動繼續)

注：以上都可作為<marquee></marquee>標簽對里的開始標簽里的屬性添加想要的效果

css：

CSS Code復制內容到剪貼板

1. #movie  

2.   

3.  {  

4.   

5.    width:360px;  

6.   

7.    height:400px;  

8.   

9.    background:url("F:\images\1.jpg");  

10.   

11.    border:1px solid #000000;  

12.   

13.    text-align:center;  

14.   

15.    margin:auto;  

16.   

17.    position:relative;  

18.   

19.  }  

20.   

21.  #movieup  

22.   

23.  {  

24.   

25.    width:100%;  

26.   

27.    height:40px;  

28.   

29.    background:#000000;  

30.   

31.    position:absolute;  

32.   

33.    top:0px;  

34.   

35.     

36.   

37.  }  

38.   

39.  #moviedown  

40.   

41.  {  

42.   

43.     width:100%;  

44.   

45.     height:40px;  

46.   

47.     background:#000000;  

48.   

49.     position:absolute;  

50.   

51.     bottombottom:0px;  

52.   

53.  }  

到此，關于“怎么用html+css+div實現電影結束效果”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！