• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > html+css+div实现电影结束效果

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含html,css,div,电影,结束等相关知识,佚名 希望在学习及工作中可以帮助到您

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

html代码:

  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:

  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.    p

您可能想查找下面的文章:

  • 利用HTML5+CSS3实现3D转换效果实例详解
  • 常见CSS与HTML使用误区详解
  • HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
  • HTML CSS样式基础(必看篇)
  • 浅谈HTML(css基础样式)
  • html+css+div实现电影结束效果
  • 用CSS3打造HTML5的Logo(实现代码)
  • Div+CSS对HTML的table表格定位用法实例
  • 纯html+css制作三级下拉菜单
  • 基于DOM+CSS3实现OrgChart组织结构图插件

相关文章

  • 2017-08-06CSS3属性box-shadow使用详细教程
  • 2017-08-06你应该知道的3个CSS技巧
  • 2017-08-06CSS 制作网页导航条(下)
  • 2017-08-06浏览器地址栏中显示自定义小图标
  • 2017-08-06DIV 边距属性在Chrome和IE中的区别深入理解
  • 2017-08-06css 表单上传文件的“浏览”按钮修改
  • 2017-08-06css中margin:0 auto居中问题深入探讨
  • 2017-08-06CSS 类名的长命名和短命名
  • 2017-08-06页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe
  • 2017-08-06浅析几个CSS3常用功能的写法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 学习DIV+CSS网页布局之一列布局
    • css之clearfix的用法深入理解(必看篇)
    • 一款恶搞头像特效的制作过程 利用css3和jquery
    • IE6无法识别伪对象:first-letter和:first-line解决方法
    • CSS中的伪元素简介
    • 详解CSS中的Box Model盒属性的使用
    • css3 transform及原生js实现鼠标拖动3D立方体旋转
    • CSS定义Radio单选项和Checkbox复选框样式有效代码
    • css3的图形3d翻转效果应用示例
    • CSS去掉A标签(链接)虚线框的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有