html+css+div完成电影完毕实际效果

日期：2021-01-20 类型：科技新闻 

关键词：制作小程序，小程序商城，扫码点餐小程序，微信小程序开店的步骤，牛刀小程序

常常大家看电影都会看到电影完毕后会出現1段详细介绍这个电影的导演、编剧、主演、友谊出演这些1些电影信息内容的翻转字幕，那末那个实际效果能够用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>

下面是我对翻转标识中的1些普遍特性的列举：

翻转方位 direction=up/down/left/right （向上/向下/向左/向右）

翻转速率 scrollamount=4/5/6 （4/5/6是较为合适大伙儿应用的3个翻转速率）

翻转个人行为 behavior=scroll/slide/alternate（循环系统翻转/只翻转1次/往返翻转）

翻转次数 loop=3(循环系统3次)

翻转延时 scrolldelay=1000(1000毫秒即1秒)

限定翻转地区尺寸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.  }  

 我原本把翻转实际效果录成微视頻提前准备给大伙儿看看的，但不知道道是没这作用還是有点初学者上路没寻找在哪儿里提交当地视頻，只能临时先提交静态数据相片了，了解它是向上翻转的字幕便可，这只是翻转标识的1个简易运用，看到该篇随笔的园友们能够增加更多款式使它更为丰富多彩多彩。

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

上一篇：浅谈HTML（css基本款式） 返回下一篇：没有了