|
同步移动显示歌名的播放器
本集播放器同步显示循环移动的歌曲名称，控件、进度条、时间轴、列表等分别定位。画面中引用了css样式。
海特行者欢迎你
css代码：
＜style type="text/css"＞
.动画 {
animation-name: 扩散; /*给动画命名称*/
animation-duration: 20s;/*给动画规定用时*/
animation-iteration-count: infinite;/*定义动画播放次数*/
animation-timing-function: linear;/*定义动画播放的贝塞尔曲线*/
}
.动画,.人物{
position:relative ;/*相对定位*/
opacity:0.5;/*背景图透明度*/
width: 650px; height: 450px; /*背景图宽高*/
border-radius: 50%;/*图片圆角半径*/
background-image:url(http://www.oldkids.cn/upload/2019/10/06/blog_20191006171804100.gif);
background-color: #d436cc;/*背景颜色（无背景图片时显示）*/
transform:translate(12%,5%) /*背景图片定位*/
}
@keyframes 扩散 {
0% { opacity:1.0; transform:translate(-15%,60%) scale(0.2) }
50% { opacity:0.7; transform:translate(20%,-80%) scale(0.8) }
100% { opacity:0.2; transform:translate(0%,-95%) scale(1.2) } }
＜/style＞
＜div class="人物"＞
＜img src="http://img4.oldkids.cn/upload/260811000/u260810070/2016/11/20/blog_2016
1120155355231113.gif" style="width: 400px; height: 400px;" /＞
＜/div＞
＜div class="动画"＞
＜span class="白"＞海特行者欢迎你
＜/div＞
代码解析：
括号中有两个百分数，前者水平定位，后者垂直定位。可以正值或负值。
透明度 opacity 选值范围： 0-1.0 值越小越透明。
音乐播放器代码。
＜div style="MARGIN-TOP: -650px; MARGIN-LEFT: -30px;"＞＜embed allowscriptaccess="never" flashvars="mp3=http://www.oldkids.cn/upload/2019/09/27/ue_1569523987799.mp3|
http://fdfs./group17/M00/42/3A/wKgJKVeRzZTjfg-HABpHGLsjUsM995.mp3| http://fdfs./group19/M04/42/3C/wKgJJleRzRTBU3C4ABbUpYUrv_c286
.mp3| http://fdfs./group59/M0A/5A/1C/wKgLelywa2Tyo3zRAB0LY16NUZM101
.mp3 &Amp;mp3n=春水流--刘紫玲|落花流水--扬琴|杭州姑娘--扬琴|因为爱情--小提琴&Amp;gcx=80&Amp;gcy=130&sjx=50&Amp;Amp;sjy=215
&Amp;anx=600&Amp;any=225&Amp;jdtx=50&Amp;jdty=245&Amp;gcfd=270
&Amp;gckd=600&Amp;gcys=ff0000&Amp;anfd=80&Amp;anys=ff00ff&Amp;sjfd=140
&Amp;sjys=ffffff&Amp;jdtxz=670&Amp;jdtgd=2&Amp;jdtbfys=ff0000&Amp;jdtxzys=
E6ED9A&Amp;dgx=30&Amp;dgy=0&Amp;dggd=80&Amp;dgbjtm=150&Amp;dgqmbj
=e1ffff&Amp;dgdqzys=ff0000&Amp;dgqtzys=ff00ff&Amp;r=true&Amp;s=1&Amp;" height="250" src=" http://img1.oldkids.cn/upload/260808000/u260805503/2015/02/20/group_2015
0220080825810206.swf " style="Z-INDEX: 0" type="application/x-shockwave-flash" width="750" wmode="transparent"＞＜/embed＞＜/div＞
css代码解析：
mp3.....歌曲地址，用竖线符号相隔。
mp3n.....歌曲名称，用竖线符号相隔。
gcx.....移动歌名x座标。
gcy.....移动歌名y座标。
gcfd.....移动歌名字大小。
gcys.....移动歌名字颜色。
gckd.....移动歌名字宽范围。
sjx.....时间轴x座标。
sjy.....时间轴y座标。
sjfd.....时间轴字大小。
sjys.....时间轴字颜色。
anx.....控件x座标。
any.....控件y座标。
anfd.....控件大小。
anys.....控件颜色。
jdtx.....进度条x座标。
jdty.....进度条y座标。
jdtxz.....进度条长度。
jdtgd.....进度条宽度（范围：1-3 ；设为0则不显示）。
jdtxzys.....进度条颜色。
jdtbfys.....进度条行进色。
dgx.....列表x座标。
dgy.....列表y座标。
dgwzkd.....列表宽度。
dggd.....列表高度。
dgqmbj.....列表背景颜色。
dgbjtm.....列表背景透明度。
|
