怎么用html+css+div实现电影结束效果
这篇文章主要介绍“怎么用html+css+div实现电影结束效果”,在日常操作中,相信很多人在怎么用html+css+div实现电影结束效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用html+css+div实现电影结束效果”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
经常我们看电影都会看到电影结束后会出现一段介绍这个电影的导演、编剧、主演、友情出演等等一些电影信息的滚动字幕,那么那个效果可以用html+css+div实现。具体实现代码如下:
html代码:
XML/HTML Code复制内容到剪贴板
<div id="movie">
<div id="movieup"></div><br>
<marquee direction="up" height=400px;>
<p>导演:***</p>
<p>编剧:***</p>
<p>主演:**** ** *** </p>
<p>友情出演:*** *** **</p><br> </marquee><br>
<div id="moviedown"></div><br></div>
滚动标签:<marquee>要滚动的文字/图像<img class="lazy" data-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复制内容到剪贴板
#movie
{
width:360px;
height:400px;
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;
}
到此,关于“怎么用html+css+div实现电影结束效果”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341