《长干行·妾发初覆额（唐·李白）》 - 张绪茜
本帖最后由 加林森 于 2022-4-7 19:16 编辑 <br /><br /><style type="text/css">.outer {
position: relative;
left: -300px;
top:120px;
width: 1200px;
height: 847.5px;
box-shadow: 4px 4px 5px #888;
border-radius:16px;
background: #FFF url('https://pic.imgdb.cn/item/624e412f239250f7c516221d.gif') no-repeat center/contain;
}
.outer::before {
content: attr(data-tt);
position: absolute;
left: 580px;
top: 240px;
padding: 14px;
font: bold 2.2em / 1.5em Monospace;
color: #993300;
text-shadow: 2px 2px 6px #cccc33;
writing-mode: vertical-lr;
white-space: pre;
}
.outer::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
opacity: .75;
background: url('https://wkphoto.cdn.bcebos.com/0b55b319ebc4b745fe0fb272dffc1e178a82153e.jpg');
}
/* 文字走马灯 */
.txtFly {
position: absolute;
--w: 300px;
width: var(--w);
left: 560px;
top: 586px;
overflow: hidden;
}
.txtFly div {
word-break: keep-all;
white-space: nowrap;
font: normal 22px /24px '楷体','微软雅黑';
color:#993300; text-shadow: 0 0 1px #111;
animation: fly 26s linear infinite;
}
/* 走马灯动画 */
@keyframes fly {
from { transform: translateX(100%); }
to { transform: translateX(calc(-340% - var(--w))); }
}
</style>
<div class="outer" data-tt="妾发初覆额， 折花门前剧。 郎骑竹马来， 绕床弄青梅。 ——唐：李白">
<div class="txtFly" >
<div><span style="color: #999900;">《长干行·妾发初覆额》—张绪茜</span>妾发初覆额，折花门前剧。
郎骑竹马来，绕床弄青梅。
同居长干里，两小无嫌猜。
同居长干里，两小无嫌猜。
十四为君妇，羞颜未尝开。
低头向暗壁，千唤不一回。
十五始展眉，愿同尘与灰。
常存抱柱信，岂上望夫台。
十六君远行，瞿塘滟滪堆。
五月不可触，猿声天上哀。
门前迟行迹，一一生绿苔。……</div></div></div>
<script language="javascript">
let yyy = document.createElement('iframe');
yyy.src = 'https://music.163.com/outchain/player?type=2&id=1855969828&auto=1&height=66';
yyy.style.display = 'none';
document.querySelector('.outer').appendChild(yyy);
</script>
<br><br><br><br><br><br><br><br><br><br><br>
队长这个真漂亮，非常清新淡雅{:4_187:} 情景交融、赏心悦目。俺给一个大大的赞！ 你这个底图放大长宽比有点问题，所以横向有个白边。若宽取1200，高应为847.5，这样那个边就没了{:4_173:} 红影 发表于 2022-4-7 10:23
队长这个真漂亮，非常清新淡雅
谢谢红影。{:4_204:} 梦油 发表于 2022-4-7 10:23
情景交融、赏心悦目。俺给一个大大的赞！
谢谢梦油！{:4_204:}{:4_190:} 红影 发表于 2022-4-7 10:28
你这个底图放大长宽比有点问题，所以横向有个白边。若宽取1200，高应为847.5，这样那个边就没了
好的好的，我去修改。 红影 发表于 2022-4-7 10:28
你这个底图放大长宽比有点问题，所以横向有个白边。若宽取1200，高应为847.5，这样那个边就没了
现在修改好了，没有白边了。谢谢红影！{:4_204:} 加林森 发表于 2022-4-7 10:34
谢谢梦油！
别客气。 加林森 发表于 2022-4-7 10:34
好的好的，我去修改。
嗯嗯，现在这个比例对了呢{:4_187:} 加林森 发表于 2022-4-7 10:37
现在修改好了，没有白边了。谢谢红影！
这个的动图可能放绿色的叶子可能更好看点？这个红色花瓣的平铺时边缘感觉能看出来。
我一会发个绿叶的，这些动图队长都可以收一下呢，以后想用的时候就能用了{:4_173:} 红影 发表于 2022-4-7 10:56
这个的动图可能放绿色的叶子可能更好看点？这个红色花瓣的平铺时边缘感觉能看出来。
我一会发个绿叶的， ...
好的好的，谢谢啦。{:4_204:} 红影 发表于 2022-4-7 10:53
嗯嗯，现在这个比例对了呢
嗯嗯，我忘记先去老黑那里试一试了。 梦油 发表于 2022-4-7 10:45
别客气。
好的好的。{:4_190:} 漫天的花雨和摆动的荷花都 用的马术吧。真好玩！{:4_199:} 樵歌 发表于 2022-4-7 15:14
漫天的花雨和摆动的荷花都 用的马术吧。真好玩！
是透明动图制作的。 加林森 发表于 2022-4-7 11:05
好的好的，谢谢啦。
之前找的，队长可以都存一下，以后要用的时候多点选择。 红影 发表于 2022-4-7 18:50
之前找的，队长可以都存一下，以后要用的时候多点选择。
好的，谢谢红影。{:4_204:} 加林森 发表于 2022-4-7 11:05
嗯嗯，我忘记先去老黑那里试一试了。
是我的问题，他的地图设置用了center/cove ，这样就不存在一定按比例，多余的会被切掉。我用center/contain，就必须是等比例，若比例不同，则用底色的边来补充。
队长用了我的那种，所以造成了麻烦。队长可以试试，把图片后面的contain换成cove，就可以随意定宽高而不出现白边了。
我也是比较后才注意到这点的{:4_173:} 红影 发表于 2022-4-7 19:01
是我的问题，他的地图设置用了center/cove ，这样就不存在一定按比例，多余的会被切掉。我用center/conta ...
好的好的，我牢记了。{:4_204:}
页:
[1]
2