起个网名好难 发表于 2024-5-31 20:59

快乐童年 -- 儿童节快乐！

本帖最后由 起个网名好难 于 2024-6-1 07:23 编辑 <br /><br /><meta name="referrer" content="never" />
<style>
#oblk        {
        --w:640px;
        --h:calc(1.5 * var(--w));
        width:var(--w);
        height:calc(var(--h) - 32px);
        overflow:hidden;
        border-radius:24px;
        box-shadow:4px 4px 10px black;
        position:relative;
        margin:auto;
       
        #pichold        {
                width:calc(16 * var(--w));
                position:absolute;
                left:0px;left:0px;
                z-index:10;
                animation: mleft 80s steps(16) infinite;
               
                & img        {width:var(--w);height:var(--h);float:left;}
        }
       
        #player        {width:96px;height:96px;position:absolute;left:32px;bottom:16px;z-index:99;}
}       
@keyframes        mleft        {to {left:calc(-16 * var(--w));}}
</style>

<div id="oblk">
        <div id="pichold">
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RJQwotbxtqLemARfBtECzDqSgAmiaMgSzWGHQDelibjXXob0th3r9bosFS1RicNU82Brpuvkuibp6rJQ/640" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RJQwotbxtqLemARfBtECzDnaWCXuf0Wmybz61MTKFZN8hVRbcBT0F0gtQdicgyCbb4pmvZ0OXUCWg/640"         />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RJQwotbxtqLemARfBtECzDmjPRfb1QQtorzYHBNyQGLWCTLsiaT8xvUQnqqicCbC9VcO6Qt1ficssYg/640" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RJQwotbxtqLemARfBtECzDX2m3Dr0vya0TUoiaU5VV96BAe4gl6BC3BWzsWKQdSZuSXbcCgX5UgQg/640"         />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RJQwotbxtqLemARfBtECzD9MQSKWVEQowDp765oUxCz4AW1OLC1WMAgPKFdhib5j54EozcIwO7RdA/640"         />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RJQwotbxtqLemARfBtECzDC28cfS2NcnsXSqo3FNzFdJyBgdjnFP7cDFjhVJz4T2uJxveMD8twHg/640"         />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RJQwotbxtqLemARfBtECzDicutZgHyrgBn1LQiasCY4ib11L6RPbTYpjDsGyGib3QRkA1cITNvgw381w/640"/>
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RJQwotbxtqLemARfBtECzDKUJuwhB7OMkk1w05Ab82Xn7libnZbdRMcNbJ0EFiao0dYrtshtGWIDXA/640"         />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RJQwotbxtqLemARfBtECzDap9MgS57FytyEJRv59DPWeHshAvRO2Vqef9Dw1ibwNl9EKCwrkhTnIg/640"         />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RJQwotbxtqLemARfBtECzDFteoICZoq6JmICqfMib8BicWyor3BC1BISBrLCicZqG5Va4VE8zceGZaQ/640" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RJQwotbxtqLemARfBtECzDQKxnSIZ6f24tf1qUt5aC4xnM3GiaLibuibdn5EicicUYK8TicRAoqfmQmD8w/640"         />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RJQwotbxtqLemARfBtECzD3v8YGPd8yIP02FPrZS7PbM0VBs7DMa6J3oVJzb8nQBL6Nkia8GuNtgQ/640"         />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RJQwotbxtqLemARfBtECzDOyI4JmUcZWVc9qug7DUmYGGib2kbwMsVajiaLKS54B3VDGo0MLRw5ibLw/640" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RJQwotbxtqLemARfBtECzD8qBKaucEicQpDJ3LZnanpEzSUGFo9hMsXIot3Uh2icn3UEdSXnibdaqsQ/640" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RJQwotbxtqLemARfBtECzDtGBj0FXfqd63AVfpwibhp44aShibia7e1yIoRpD7CJQDrCCOnt7W7ZFAA/640" />
                <img src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RJQwotbxtqLemARfBtECzDCLT6KETibpMibCAtPib116z2p1YvhichtRZ2YRSB0TgMVHZJ3QStnG4WicA/640" />
        </div>
        <audio id='aud' src="https://music.163.com/song/media/outer/url?id=29217540.mp3" loop autoplay ></audio>
        <img id='player' src="https://p1.itc.cn/q_70/images03/20200910/777a846e82c842a796ab350070b34871.gif" alt="" >
</div>
<script>
player.onclick = () => {aud.paused ? aud.play() : aud.pause();}
</script>

起个网名好难 发表于 2024-5-31 20:59

本帖最后由 起个网名好难 于 2024-6-1 00:39 编辑

<style>
#oblk      {
      --w:640px;
      --h:calc(1.5 * var(--w));
      width:var(--w);
      height:calc(var(--h) - 32px);
      overflow:hidden;
      border-radius:24px;
      box-shadow:4px 4px 10px black;
      position:relative;
      margin:auto;
      
      #pichold      {
                width:calc(16 * var(--w));
                position:absolute;
                left:0px;left:0px;
                z-index:10;
                animation: mleft 80s steps(16) infinite;
               
                & img      {width:var(--w);height:var(--h);float:left;}
      }
      
      #player      {width:96px;height:96px;position:absolute;left:32px;bottom:16px;z-index:99;}
}      
@keyframes      mleft      {to {left:calc(-16 * var(--w));}}
</style>


这样不知算不算CSS嵌套 ?

小辣椒 发表于 2024-5-31 21:13

儿童节看起来大家都开心快乐的{:4_205:}

小辣椒 发表于 2024-5-31 21:14

欣赏难难好制作，这首儿歌也是老歌，很好听的

小辣椒 发表于 2024-5-31 21:14

借难难的美帖祝全天下的小朋友节日快乐！

起个网名好难 发表于 2024-5-31 21:28

小辣椒 发表于 2024-5-31 21:13
儿童节看起来大家都开心快乐的

儿童节、青年节、重阳节 都一起快乐{:5_106:}

起个网名好难 发表于 2024-5-31 21:29

小辣椒 发表于 2024-5-31 21:14
欣赏难难好制作，这首儿歌也是老歌，很好听的

谢谢支持鼓励！

晚上好！

梦油 发表于 2024-5-31 21:31

祝花潮的小儿童、老儿童节日快乐！

起个网名好难 发表于 2024-5-31 21:33

小辣椒 发表于 2024-5-31 21:14
借难难的美帖祝全天下的小朋友节日快乐！

https://inews.gtimg.com/newsapp_match/0/11814206875/0

起个网名好难 发表于 2024-5-31 21:34

梦油 发表于 2024-5-31 21:31
祝花潮的小儿童、老儿童节日快乐！

老儿童同乐{:5_106:}

红影 发表于 2024-5-31 21:37

这个很童趣啊，轮播图图有趣，那个小播也特别可爱。
欣赏难难好帖{:4_199:}

红影 发表于 2024-5-31 21:37

借难难好帖，同祝快乐儿童节{:4_177:}

起个网名好难 发表于 2024-5-31 21:46

红影 发表于 2024-5-31 21:37
这个很童趣啊，轮播图图有趣，那个小播也特别可爱。
欣赏难难好帖

谢谢鼓励支持！ 晚上好！

起个网名好难 发表于 2024-5-31 21:48

红影 发表于 2024-5-31 21:37
借难难好帖，同祝快乐儿童节

https://p3.itc.cn/images03/20200601/da7a36c34f1f4a9083f6cacd34610ab8.gif

小辣椒 发表于 2024-5-31 21:51

起个网名好难 发表于 2024-5-31 21:28
儿童节、青年节、重阳节 都一起快乐

开心快乐就是最重要的{:4_173:}

小辣椒 发表于 2024-5-31 21:52

起个网名好难 发表于 2024-5-31 21:33


小辣椒已经不是儿童了，是儿童她妈了{:4_170:}

小辣椒 发表于 2024-5-31 21:52

起个网名好难 发表于 2024-5-31 21:29
谢谢支持鼓励！

晚上好！

难难儿童节快乐~~{:4_170:}

起个网名好难 发表于 2024-5-31 22:09

小辣椒 发表于 2024-5-31 21:51
开心快乐就是最重要的

https://img1.baidu.com/it/u=2665963088,3138428104&fm=253&fmt=auto&app=138&f=GIF?w=466&h=412

起个网名好难 发表于 2024-5-31 22:10

小辣椒 发表于 2024-5-31 21:52
小辣椒已经不是儿童了，是儿童她妈了

来这恐怕没儿童吧{:5_117:}，儿童不宜{:5_106:}

起个网名好难 发表于 2024-5-31 22:11

小辣椒 发表于 2024-5-31 21:52
难难儿童节快乐~~

倒回一甲子正当时{:5_117:}
页: [1] 2 3 4
查看完整版本: 快乐童年 -- 儿童节快乐！