首页 > 网页制作 > CSS

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

admin CSS 2022-02-06 16:04:47 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>  

滚动标签:要滚动的文字/图像 %20

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

滚动方向%20direction=up/down/left/right%20(向上/向下/向左/向右)

滚动速度%20scrollamount=4/5/6%20(4/5/6是比较适合大家使用的三个滚动速度)

滚动行为%20behavior=scroll/slide/alternate(循环滚动/只滚动一次/来回滚动)

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

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

限制滚动区域大小width=https://www.jb51.net/css/””%20height="" %20bgcolor=""(用来显示出可以滚动的区域)

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

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

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

css:

CSS%20Code复制内容到剪贴板 %20%20%20%20#movie   %20%20%20%20
  •   
  • %20%20%20%20 {   %20%20%20%20
  •   
  • %20%20%20%20   width:360px;   %20%20%20%20
  •   
  • %20%20%20%20   height:400px;   %20%20%20%20
  •   
  • %20%20%20%20   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;  
  •   
  •     bottombottom:0px;  
  •   
  •  }  
  • www.jb51.net

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

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

    版权声明

    本文仅代表作者观点,不代表本站立场。
    本文系作者授权发表,未经许可,不得转载。
    本文地址:/web/CSS/77799.html

    留言与评论(共有 0 条评论)
       
    验证码:

    潘少俊衡

    | 桂ICP备2023010378号-4

    Powered By EmpireCMS

    爱享小站

    中德益农

    谷姐神农

    环亚肥料

    使用手机软件扫描微信二维码

    关注我们可获取更多热点资讯

    感谢潘少俊衡友情技术支持