论坛 › 动画音画 › 《太平春市图》动画版-------AI小视频

深秋红枫 发表于 2025-2-9 12:14

《太平春市图》动画版-------AI小视频

本帖最后由 深秋红枫 于 2025-2-9 22:20 编辑 <br /><br /><DIV style="POSITION: relative; WIDTH:3500px; height:650px; left:-520px;top:50px;">
<style>


p.sticky {

   position: sticky;
   
   font-family:黑体;
   font-size:30px;
   font-color:red;

}




/* 容器样式 */

.marquee-container {
    width: 100%;/* 容器宽度 */
      

overflow: hidden;   /* 隐藏溢出内容 */
   


position: relative;


background: #FFF;    /* 背景颜色 */
   


height: 650px;   /* 根据视频高度调整 */
}

   


/* 视频轨道样式 */

.video-track {
    position: absolute;

white-space: nowrap;/* 保持内容不换行 */

animation: marquee 160s linear infinite; /* 动画设置 */
   
font-size: 0;         /* 消除inline-block间隙 */

}


/* 视频通用样式 */

.video-item {
    position: relative;

display: inline-block; /* 横向排列 */
   
width: 870px;         /* 视频宽度 */
   
height: 650px;      /* 视频高度 */
   
margin: 0;            /* 消除默认外边距 */
   
padding: 0;         /* 消除默认内边距 */
   
border: none;         /* 消除边框 */

}


/* 视频元素样式 */

.video-item video {
    width: 100%;
    height: 100%;
   
object-fit: cover;/* 保持视频比例填充 */
   
display: block;       /* 消除inline-block间隙 */

}


/* 滚动动画 */

@keyframes marquee {
    0% { transform: translateX(0); }

100% { transform: translateX(-50%); }

}

</style>


<div class="marquee-container">
   
<div class="video-track">
      <!-- 原始视频组 -->
      
<div class="video-item"><video autoplay muted loop playsinline><source src="https://cccimg.com/view.php/98b6a978fe86d1c8762af3901758760e.mp4?v=1" type="video/mp4"></video></div>
      
<div class="video-item"><video autoplay muted loop playsinline><source src="https://cccimg.com/view.php/01294796c1d96f706ce0c442eaea30c7.mp4?v=1" type="video/mp4"></video></div>

<div class="video-item"><video autoplayloop playsinline><source src=https://cccimg.com/view.php/b6c05bde6175690accc66c48e7616ad6.mp4?v=1" type="video/mp4"></video></div>

<div class="video-item"><video autoplay muted loop playsinline><source src="https://cccimg.com/view.php/9b27d4222df2ce98f1d92e8d09a3bf74.mp4?v=1" type="video/mp4"></video></div>
<div class="video-item"><video autoplay muted loop playsinline><source src="https://cccimg.com/view.php/2a44c993f87c4caa84c179f4739d9239.mp4?v=1" type="video/mp4"></video></div
>      
<div class="video-item"><video autoplay muted loop playsinline><source src="https://cccimg.com/view.php/03760af4f0c1e2d94fd0b8e399ee7c44.mp4?v=1" type="video/mp4"></video></div>
<div class="video-item"><video autoplay muted loop playsinline><source src="https://cccimg.com/view.php/717d2425e391f413c7d95ff659ce6890.mp4?v=1" type="video/mp4"></video></div>
                                          
      
<!-- 克隆视频组（实现无缝衔接） -->
      
<div class="video-item"><video autoplay muted loop playsinline><source src="https://cccimg.com/view.php/98b6a978fe86d1c8762af3901758760e.mp4?v=1" type="video/mp4"></video></div>

<div class="video-item"><video autoplay muted loop playsinline><source src="https://cccimg.com/view.php/01294796c1d96f706ce0c442eaea30c7.mp4?v=1" type="video/mp4"></video></div>

<div class="video-item"><video autoplay muted loop playsinline><source src="https://cccimg.com/view.php/b6c05bde6175690accc66c48e7616ad6.mp4?v=1" type="video/mp4"></video></div>

<div class="video-item"><video autoplay muted loop playsinline><source src="https://cccimg.com/view.php/9b27d4222df2ce98f1d92e8d09a3bf74.mp4?v=1" type="video/mp4"></video></div>

<div class="video-item"><video autoplay muted loop playsinline><source src="https://cccimg.com/view.php/2a44c993f87c4caa84c179f4739d9239.mp4?v=1" type="video/mp4"></video></div>
<div class="video-item"><video autoplay muted loop playsinline><source src="https://cccimg.com/view.php/03760af4f0c1e2d94fd0b8e399ee7c44.mp4?v=1" type="video/mp4"></video></div>

<div class="video-item"><video autoplay muted loop playsinline><source src="https://cccimg.com/view.php/717d2425e391f413c7d95ff659ce6890.mp4?v=1" type="video/mp4"></video></div>

</div>
</div>

<marquee style="WIDTH:100%; HEIGHT: 100px;" scrollamount="6" scrolldelay="0" direction="left" align="center">
<p class="sticky" >《太平春市图》由清代宫廷画家丁观鹏绘制，卷长30.3厘米，宽233.5厘米，描绘了新春市集的热闹景象。画面中不仅有各式摊贩，还有挑担沿街叫卖的货郎。例如，卖鲜果的货郎挑著高肩扁担串连两个圆形食盒，一端架著板子，放置各式鲜果、食物的碗盘；另一名货郎担著平肩竹篓担子，扁担上插了各式兵器和面具，吸引儿童围观挑选。这些细节生动地展现了清代新春市集的繁华景象。《太平春市图》绘制于清乾隆七年（1742年），正值乾隆盛世。这一时期，社会安定，经济繁荣，文化发展达到了一个新的高峰。乾隆皇帝非常重视文化事业，经常命令宫廷画师创作各种反映社会生活的作品。《太平春市图》正是在这种背景下诞生的，它不仅记录了当时的社会风貌，也体现了乾隆皇帝对民间生活的关注和对太平盛世的赞美。画卷创作于乾隆七年（1742年），现藏于台北故宫博物院。《太平春市图》动画版，由AI生成动画，深秋红枫剪辑编制，纯属情节演绎，仅供娱乐。</p>
</marquee>
<audio src="https://cccimg.com/view.php/8c6131153e7417d28f56ec54b6b28f2a.mp3" loop="loop"   autoplay="autoplay"></audio>
</div>

深秋红枫 发表于 2025-2-9 12:17

本帖最后由 深秋红枫 于 2025-2-9 13:02 编辑

            代码音画，由七个视频播放器组合，横向移动联播。画面若非动画，请刷新或重新加载！
            本想无缝连接组合，但仍会显现接缝。修改代码无果，也就随而任之。

起个网名好难 发表于 2025-2-9 13:11

有意思， 人物动起来了。 赞！

深秋红枫 发表于 2025-2-9 13:25

本帖最后由 深秋红枫 于 2025-2-9 13:26 编辑 <br /><br />起个网名好难 发表于 2025-2-9 13:11
有意思， 人物动起来了。 赞！


   视频连接有时会有缝隙，可能与各视频分辨率略有差异有关，不作调整了。
<script type="text/javascript">
var lxtxt =[">lmth/<",
'>vid/<>naps/<！评点与赏观的您谢谢>"体宋仿 me0.3 dlob:tnof;%081:thgieh-enil;)fig.ItYAP4/31/90/1202/moc.x1xa.3z//:sptth(lru:egami-dnuorgkcab;)0,0,552(bgr xp1 :ekorts-txet-tikbew-;tnerapsnart:roloc-llif-txet-tikbew-;txet:pilc-dnuorgkcab-tikbew-"=elyts naps<',
'>";evitaler : noitisop ;%081:thgieh-enil ;retnec:ngila-txet ;xp05: pot-gniddap ;otua xp0 : nigram ;xp053:thgieh;%001:htdiw"=elyts vid<'];

var linelen = lxtxt.length;
var txtStr = '';
for(n = linelen - 1; n >=0; n--)      {
      var linetxt = lxtxt;
      for(j = linetxt.length - 1; j>=0;j--)      {
                txtStr += linetxt.charAt(j);
      }
}
document.write(txtStr);
</script>

起个网名好难 发表于 2025-2-9 13:48

本帖最后由 起个网名好难 于 2025-2-9 13:49 编辑 <br /><br /><style type="text/css">
#oBlk        {width:1200px;height:600px;position:relative;overflow:hidden;margin:80px 0 32px calc(50% - 681px);}
#vidHold        {width:7200px;height:600px;position:absolute;top:0px;left:0px;animation: m2left 112s linear infinite;}
#vidHold video        {width:800px;height:600px;display:inline-block;float:left;}

@keyframes        m2left        {
        to        {        left: -5600px;        }
}
</style>

<div id="oBlk">
        <div id="vidHold">
                <video src="https://cccimg.com/view.php/98b6a978fe86d1c8762af3901758760e.mp4?v=1" loop autoplay muted ></video>
                <video src="https://cccimg.com/view.php/01294796c1d96f706ce0c442eaea30c7.mp4?v=1" loop autoplay muted ></video>
                <video src="https://cccimg.com/view.php/b6c05bde6175690accc66c48e7616ad6.mp4?v=1" loop autoplay muted ></video>
                <video src="https://cccimg.com/view.php/9b27d4222df2ce98f1d92e8d09a3bf74.mp4?v=1" loop autoplay muted ></video>
                <video src="https://cccimg.com/view.php/2a44c993f87c4caa84c179f4739d9239.mp4?v=1" loop autoplay muted ></video>
                <video src="https://cccimg.com/view.php/03760af4f0c1e2d94fd0b8e399ee7c44.mp4?v=1" loop autoplay muted ></video>
                <video src="https://cccimg.com/view.php/717d2425e391f413c7d95ff659ce6890.mp4?v=1" loop autoplay muted ></video>

                <video src="https://cccimg.com/view.php/98b6a978fe86d1c8762af3901758760e.mp4?v=1" loop autoplay muted ></video>
                <video src="https://cccimg.com/view.php/01294796c1d96f706ce0c442eaea30c7.mp4?v=1" loop autoplay muted ></video>
        </div>
</div>

红影 发表于 2025-2-9 16:08

其实不管有没有接缝，不同的动图，在接缝的地方还是有点动作不协调呢，这也是AI的极限了呢。
图图制作很漂亮，深秋红枫辛苦了{:4_187:}

红影 发表于 2025-2-9 16:09

这图图太长了点，应该把超出屏幕的设置为不可见才好{:4_187:}

深秋红枫 发表于 2025-2-9 17:38

起个网名好难 发表于 2025-2-9 13:48
本帖最后由 起个网名好难 于 2025-2-9 13:49 编辑
#oBlk        {width:1200px;height:600px;position:relative ...

谢谢老师，您5楼的代码简洁多了，学习收藏了！

深秋红枫 发表于 2025-2-9 20:24

红影 发表于 2025-2-9 16:09
这图图太长了点，应该把超出屏幕的设置为不可见才好


<script type="text/javascript">
var lxtxt =[">lmth/<",
'>vid/<>naps/<！评点与赏观的您谢谢>"体宋仿 me0.3 dlob:tnof;%081:thgieh-enil;)fig.ItYAP4/31/90/1202/moc.x1xa.3z//:sptth(lru:egami-dnuorgkcab;)0,0,552(bgr xp1 :ekorts-txet-tikbew-;tnerapsnart:roloc-llif-txet-tikbew-;txet:pilc-dnuorgkcab-tikbew-"=elyts naps<',
'>";evitaler : noitisop ;%081:thgieh-enil ;retnec:ngila-txet ;xp05: pot-gniddap ;otua xp0 : nigram ;xp053:thgieh;%001:htdiw"=elyts vid<'];

var linelen = lxtxt.length;
var txtStr = '';
for(n = linelen - 1; n >=0; n--)      {
      var linetxt = lxtxt;
      for(j = linetxt.length - 1; j>=0;j--)      {
                txtStr += linetxt.charAt(j);
      }
}
document.write(txtStr);
</script>

红影 发表于 2025-2-9 21:12

深秋红枫 发表于 2025-2-9 20:24
var lxtxt =[">lmth/

这帖子非常漂亮，很神奇{:4_187:}

小辣椒 发表于 2025-2-9 22:16

深秋红枫 发表于 2025-2-9 12:17
代码音画，由七个视频播放器组合，横向移动联播。画面若非动画，请刷新或重新加载！
       ...

一楼加不了分。感谢老师分享

小辣椒 发表于 2025-2-9 22:17

起个网名好难 发表于 2025-2-9 13:48
本帖最后由 起个网名好难 于 2025-2-9 13:49 编辑
#oBlk        {width:1200px;height:600px;position:relative ...

难难高手的，啥都会{:4_178:}

深秋红枫 发表于 2025-2-9 22:31

小辣椒 发表于 2025-2-9 22:16
一楼加不了分。感谢老师分享



<script type="text/javascript">
var lxtxt =[">lmth/<",
'>vid/<>naps/<！评点与赏观的您谢谢 >"体宋仿 me2.3 dlob:tnof;%081:thgieh-enil;)fig.6GSWx4/60/01/1202/moc.x1xa.3z//:sptth(lru:egami-dnuorgkcab;)0,0,552(bgr xp1 :ekorts-txet-tikbew-;tnerapsnart:roloc-llif-txet-tikbew-;txet:pilc-dnuorgkcab-tikbew-"=elyts naps<',
'>";evitaler : noitisop ;%081:thgieh-enil ;retnec:ngila-txet ;xp05: pot-gniddap ;otua xp0 : nigram ;xp053:thgieh;%001:htdiw"=elyts vid<'];

var linelen = lxtxt.length;
var txtStr = '';
for(n = linelen - 1; n >=0; n--)      {
      var linetxt = lxtxt;
      for(j = linetxt.length - 1; j>=0;j--)      {
                txtStr += linetxt.charAt(j);
      }
}
document.write(txtStr);
</script>

查看完整版本: 《太平春市图》动画版-------AI小视频