html+css+div实现电影结束效果

所属分类: 网页制作 / CSS 阅读数: 974
收藏 0 赞 0 分享

经常我们看电影都会看到电影结束后会出现一段介绍这个电影的导演、编剧、主演、友情出演等等一些电影信息的滚动字幕,那么那个效果可以用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.  }  

www.jb51.net

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

原文地址:http://www.cnblogs.com/cyn941105/p/5603995.html

更多精彩内容其他人还在看

CSS3实现背景透明文字不透明的示例代码

这篇文章主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈CSS中的尺寸单位

这篇文章主要介绍了浅谈CSS中的尺寸单位的相关资料,浏览器的兼容性越来越好,移动端基本是清一色的webkit,经常会用到css的不同尺寸/长度单位,这里做个整理。感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

CSS中有些属性的前面会加上“*”或“_”所代表的意思

这篇文章主要介绍了CSS中有些属性的前面会加上“*”或“_”所代表的意思,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS 设置滚动条样式的实例代码

这篇文章主要介绍了CSS 设置滚动条样式的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)

这篇文章主要介绍了纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

纯css实现多级折叠菜单折叠树效果

这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果,运用checkbox的checked值来判断下级栏目是否展开,通过css3选择器提供的checked伪类来实现此效果,感兴趣的朋友参考下吧
收藏 0 赞 0 分享

CSS Grid 网格布局全解析

这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

css flex 弹性布局详解

这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

CSS3 二级导航菜单的制作的示例

这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用css禁用input、checkbox、select等html控件实现disable效果

这篇文章主要介绍了使用css禁用input、checkbox、select等html控件实现disable效果,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多