琵琶行（7'55''）
本帖最后由 马黑黑 于 2022-1-23 15:05 编辑 <br /><br /><style>.ppxBox {
margin: 10px auto;
padding: 12px;
width: 1040px;
height: 600px;
position: relative;
left: -230px;
top: 80px;
background: rgba(0,0,0,0.8) url('https://www.huachaowang.com/data/attachment/forum/202201/23/123915qdals5pxam2n59x9.jpg') no-repeat;
cursor: pointer;
}
.txtBox {
position: absolute;
padding: 8px;
left: 820px;
top:-5px;
width: 240px;
height: 580px;
font-family: '宋体','微软雅黑';
font-size:14px;
overflow: hidden;
color: silver;
}
.txtBox div {height: 1000px;}
.ppxBox:hover .wyfram { opacity: 0.8; }
.txtBox div:hover {animation: up 20s linear infinite; }
.txtBox div:active { animation-play-state: paused; }
.wyfram {
position: relative;
top: -10px;
left: -10px;
opacity: 0;
}
@keyframes up {
from { transform: translateY(0); }
to { transform: translateY(-50%); }
}
</style>
<div class="ppxBox">
<iframe class="wyfram" frameborder="no" border="0" marginwidth="0" marginheight="0" width="168" height="52" src="https://music.163.com/outchain/player?type=2&id=25731251&auto=1&height=32"></iframe>
<div class="txtBox">
<div>
<h2>琵琶行 | 白居易</h2>
<p> <br>
浔阳江头夜送客，枫叶荻花秋瑟瑟。<br>
主人下马客在船，举酒欲饮无管弦。<br>
醉不成欢惨将别，别时茫茫江浸月。<br>
忽闻水上琵琶声，主人忘归客不发。<br>
寻声暗问弹者谁，琵琶声停欲语迟。<br>
移船相近邀相见，添酒回灯重开宴。<br>
千呼万唤始出来，犹抱琵琶半遮面。<br>
转轴拨弦三两声，未成曲调先有情。<br>
弦弦掩抑声声思，似诉平生不得志。<br>
低眉信手续续弹，说尽心中无限事。<br>
轻拢慢捻抹复挑，初为霓裳后六幺。<br>
大弦嘈嘈如急雨，小弦切切如私语。<br>
嘈嘈切切错杂弹，大珠小珠落玉盘。<br>
间关莺语花底滑，幽咽泉流冰下难。<br>
冰泉冷涩弦凝绝，凝绝不通声暂歇。<br>
别有幽愁暗恨生，此时无声胜有声。<br>
银瓶乍破水浆迸，铁骑突出刀枪鸣。<br>
曲终收拨当心画，四弦一声如裂帛。<br>
东船西舫悄无言，唯见江心秋月白。<br>
沉吟放拨插弦中，整顿衣裳起敛容。<br>
自言本是京城女，家在虾蟆陵下住。<br>
十三学得琵琶成，名属教坊第一部。<br>
曲罢曾教善才服，妆成每被秋娘妒。<br>
五陵年少争缠头，一曲红绡不知数。<br>
钿头银篦击节碎，血色罗裙翻酒污。<br>
今年欢笑复明年，秋月春风等闲度。<br>
弟走从军阿姨死，暮去朝来颜色故。<br>
门前冷落鞍马稀，老大嫁作商人妇。<br>
商人重利轻别离，前月浮梁买茶去。<br>
去来江口守空船，绕船月明江水寒。<br>
夜深忽梦少年事，梦啼妆泪红阑干。<br>
我闻琵琶已叹息，又闻此语重唧唧。<br>
同是天涯沦落人，相逢何必曾相识！
我从去年辞帝京，谪居卧病浔阳城。<br>
浔阳地僻无音乐，终岁不闻丝竹声。<br>
住近湓江地低湿，黄芦苦竹绕宅生。<br>
其间旦暮闻何物？杜鹃啼血猿哀鸣。<br>
春江花朝秋月夜，往往取酒还独倾。<br>
岂无山歌与村笛？呕哑嘲哳难为听。<br>
今夜闻君琵琶语，如听仙乐耳暂明。<br>
莫辞更坐弹一曲，为君翻作琵琶行。<br>
感我此言良久立，却坐促弦弦转急。<br>
凄凄不似向前声，满座重闻皆掩泣。<br>
座中泣下谁最多？江州司马青衫湿。</p>
</div>
</div>
</div>
原来这么多鼠标动作，为什么这字会一跳一跳的 绿叶清舟 发表于 2022-1-23 13:41
原来这么多鼠标动作，为什么这字会一跳一跳的
过年了高兴吧{:4_170:}
可能是动画时长太短，还是别的原因 马黑黑 发表于 2022-1-23 13:43
过年了高兴吧
可能是动画时长太短，还是别的原因
还有年跳一说啊{:4_189:} 漂亮的琵琶行，边听曲，边赏白居易的诗词。原来文字那里也是鼠标滑过文字才肯上翻的，还在想怎么没把全诗弄完{:4_173:} 还是有点问题，右边的文字不能全部滚动完，一直没看到座中泣下谁最多？江州司马青衫湿。
这首还是读书时背过的诗句呢，所以知道结束句是这句{:4_173:} 红影 发表于 2022-1-23 14:47
漂亮的琵琶行，边听曲，边赏白居易的诗词。原来文字那里也是鼠标滑过文字才肯上翻的，还在想怎么没把全诗弄 ...
文本的载体是div，是div带着文字在动画触发后移动 红影 发表于 2022-1-23 14:50
还是有点问题，右边的文字不能全部滚动完，一直没看到座中泣下谁最多？江州司马青衫湿。
这首还是读书时背 ...
我是设置刚刚好的，可能是字体客户端各异导致。我改大一点看看 马黑黑 发表于 2022-1-23 14:53
我是设置刚刚好的，可能是字体客户端各异导致。我改大一点看看
嗯嗯，现在可以了{:4_204:} 马黑黑 发表于 2022-1-23 14:50
文本的载体是div，是div带着文字在动画触发后移动
很棒的设计{:4_187:} 小黑老厉害了，边欣赏诗歌边听曲儿。{:4_174:} 樵歌 发表于 2022-1-23 16:34
小黑老厉害了，边欣赏诗歌边听曲儿。
{:4_190:} 红影 发表于 2022-1-23 15:40
嗯嗯，现在可以了
应该行了的 这个右面文字可以滚动{:4_178:} 冬天的雨 发表于 2022-1-23 20:08
这个右面文字可以滚动
好像效果不太理想 回肠荡气、惊心动魄的旋律，深沉的感慨 ，给听者留下回味的广阔空间。。。
{:4_204:}{:4_190:} 马黑黑 发表于 2022-1-23 17:13
应该行了的
这么多鼠标滑过的操作，而且滑到哪哪里起作用，又是新的技巧呢{:4_187:} 红影 发表于 2022-1-23 21:13
这么多鼠标滑过的操作，而且滑到哪哪里起作用，又是新的技巧呢
知识连着使用而已，各有各的功能。不过此刻我听不到音乐了，不知是酒店的限制还是什么 大猫咪 发表于 2022-1-23 20:19
回肠荡气、惊心动魄的旋律，深沉的感慨 ，给听者留下回味的广阔空间。。。
你真是文艺青年{:4_170:} 马黑黑 发表于 2022-1-23 21:43
你真是文艺青年
深切同情{:4_170:}
页:
[1]
2