怎么用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实现电影结束效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！