红影 发表于 2022-4-3 21:34

《桃花诺》（学习动图平铺和文字折行）TO马黑黑


<style type="text/css">
.outer {
      position: relative;
      left: -300px;
      top:120px;
      width: 1200px;
      height: 800px;
      box-shadow: 4px 4px 5px #888;
      border-radius:16px;
      background: #FFF url('http://image.hnol.net/c/2022-04/03/13/202204031347262181-5088534.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://pic.imgdb.cn/item/624926b227f86abb2a899e2d.gif');
}
/* 文字走马灯 */
.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="黄师塔前江水东，&#10;春光懒困倚微风。&#10;桃花一簇开无主，&#10;可爱深红爱浅红？&#10;——唐：杜甫">

    <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=480579393&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>

红影 发表于 2022-4-3 21:35

@马黑黑果然做在帖子里那个折行的分隔符不会被吞掉，顺利实现竖排文字折行{:4_205:}

马黑黑 发表于 2022-4-3 21:43

红影 发表于 2022-4-3 21:35
@马黑黑果然做在帖子里那个折行的分隔符不会被吞掉，顺利实现竖排文字折行

HTML是支持的哦

马黑黑 发表于 2022-4-3 21:44

不错，干净漂亮

绿叶清舟 发表于 2022-4-3 22:03

这个花瓣真漂亮啊

闲言不语 发表于 2022-4-4 20:07

浦江之畔红影女，可爱深红爱浅红？{:4_199:}

大猫咪 发表于 2022-4-4 20:22

红影制作真漂亮，色彩也棒，意境也好   感觉很舒服，老黑收礼开心！{:4_190:}

红影 发表于 2022-4-4 23:20

马黑黑 发表于 2022-4-3 21:43
HTML是支持的哦

是的，是黑黑教的好，很顺利地实现了竖排文字折行呢{:4_187:}

红影 发表于 2022-4-4 23:23

马黑黑 发表于 2022-4-3 21:44
不错，干净漂亮
现在文字是从左往右排列的，若是想反过来该怎么弄呢？

红影 发表于 2022-4-4 23:23

绿叶清舟 发表于 2022-4-3 22:03
这个花瓣真漂亮啊

是一个花瓣的小动图平铺得来的。{:4_173:}

红影 发表于 2022-4-4 23:24

闲言不语 发表于 2022-4-4 20:07
浦江之畔红影女，可爱深红爱浅红？

还好那是古装的，不会被误会成是影子{:4_173:}

红影 发表于 2022-4-4 23:26

大猫咪 发表于 2022-4-4 20:22
红影制作真漂亮，色彩也棒，意境也好   感觉很舒服，老黑收礼开心！

谢谢猫猫，我习惯每次把学的内容写上去，这样下回想找什么功能就方便了{:4_173:}

马黑黑 发表于 2022-4-5 00:01

红影 发表于 2022-4-4 23:23
现在文字是从左往右排列的，若是想反过来该怎么弄呢？

这个就在伪元素定义writing-mode

马黑黑 发表于 2022-4-5 00:01

红影 发表于 2022-4-4 23:20
是的，是黑黑教的好，很顺利地实现了竖排文字折行呢

本来不难

加林森 发表于 2022-4-5 18:22

红影制作得真漂亮，真好看！{:4_199:}

绿叶清舟 发表于 2022-4-5 19:09

红影 发表于 2022-4-4 23:23
是一个花瓣的小动图平铺得来的。

放在这个图上很漂亮的了

上海朝阳 发表于 2022-4-5 19:49

影姑娘制作越来越精美了

红影 发表于 2022-4-5 20:39

马黑黑 发表于 2022-4-5 00:01
这个就在伪元素定义writing-mode

弄不清楚，就这样吧{:4_173:}

红影 发表于 2022-4-5 20:40

马黑黑 发表于 2022-4-5 00:01
本来不难

这个是诗句，下回再试个词句。

马黑黑 发表于 2022-4-5 20:40

红影 发表于 2022-4-5 20:40
这个是诗句，下回再试个词句。

嗯，值得做做
页: [1] 2 3 4 5
查看完整版本: 《桃花诺》（学习动图平铺和文字折行）TO马黑黑