老谟深虑 发表于 2022-12-16 16:26

学习代码音画《一剪梅》

<div style="position:relative;width: 1024px;height: 640px;overflow:hidden;top: 0px;left:-10px;">
<div style="left: 0px;position:absolute;top: 0px;">
<style type="text/css">
.dyn_pic0      {
      width:0px;
      height:100%;
      position:absolute;
      left:100%;top:0px;
}
.turn_pic0      {
      animation:turn_pic_v 4s 1 linear forwards;
}
@keyframes turn_pic_v {
      from {
                width:0px;left:50%;opacity:0.6;
      }
      to      {
                width:100%;left:0px;opacity:1;
      }
}
</style>
<div style="width:1024px;height:640px;position:relative;background:skyblue;overflow: hidden;border-radius:0%;">
<img class="dyn_pic0" src="https://pic.imgdb.cn/item/63999388b1fccdcd3657b1ae.jpg">
<img class="dyn_pic0" src="https://pic.imgdb.cn/item/63999388b1fccdcd3657b1a5.jpg">
<img class="dyn_pic0" src="https://pic.imgdb.cn/item/63999388b1fccdcd3657b19d.jpg">
<img class="dyn_pic0" src="https://pic.imgdb.cn/item/63999388b1fccdcd3657b18e.jpg">
<img class="dyn_pic0" src="https://pic.imgdb.cn/item/63999374b1fccdcd36579452.jpg">
<img class="dyn_pic0" src="https://pic.imgdb.cn/item/63999374b1fccdcd3657943d.jpg">
<img class="dyn_pic0" src="https://pic.imgdb.cn/item/63999374b1fccdcd36579432.jpg">
<img class="dyn_pic0" src="https://pic.imgdb.cn/item/63999374b1fccdcd36579427.jpg">
<img class="dyn_pic0" src="https://pic.imgdb.cn/item/63999374b1fccdcd36579422.jpg">
</div>
</div>
<script type="text/javascript">
      function hasClass( elements,cName ){
          return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") );
      };
      function addClass( elements,cName ){
          if( !hasClass( elements,cName ) ){
                elements.className += " " + cName;
          };
      };
      function removeClass( elements,cName ){
          if( hasClass( elements,cName ) ){
                elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " );
          };
      };
      var curIdx = 0;
      var dyn_pics0 = document.getElementsByClassName('dyn_pic0');
      var lastIdx = dyn_pics0.length - 2;
      function turn_cur_pic0()      {
                removeClass(dyn_pics0, 'turn_pic0');
                dyn_pics0.parentElement.style.backgroundImage = "url(" + dyn_pics0.src + ")";
                dyn_pics0.parentElement.style.backgroundSize = "cover";
                addClass(dyn_pics0, 'turn_pic0' );
                lastIdx = curIdx;
                curIdx++;
                curIdx %= dyn_pics0.length;
                setTimeout(turn_cur_pic0, 7000);
      }
      
      turn_cur_pic0();   
</script>


<div style="left: -10px;position:absolute;top: 430px;">

<style type="text/css">.移{
        position: relative;
        width:900px;
        height: 200px;
        margin-top:0px;margin-LEFT: 0px;
        z-index: 100;
        animation: nm 5s linear infinite;}
@keyframes nm {0% { transform:scale(0.5);filter: hue-rotate(360deg) }
50% { transform:scale(1);filter: hue-rotate(100deg)brightness(140%) }
100% { transform: scale(1.2);filter: hue-rotate(0deg)brightness(180%)}
}
</style>
<div class="移"><iframe frameborder="0" height="590" marginheight="0" marginwidth="0" scrolling="no" src="http://pan.yinhuabbs.cn/view.php/f03cc0bf4357d56e63d4b38e3effbb90.html" width="1000"></iframe><br /><br /><br /><br /><br /><br />

蓝魔 发表于 2022-12-16 21:59

欣赏一下。谢谢。

容轩听雨 发表于 2022-12-16 22:03

雪梅图优美，借助代码，展示动画效果更美，LRC编辑合拍，歌契合梅之主题，赞一个，问好老师

老谟深虑 发表于 2022-12-17 19:17

蓝魔 发表于 2022-12-16 21:59
欣赏一下。谢谢。

       谢谢老师的欣赏，晚上好！

老谟深虑 发表于 2022-12-17 19:19

容轩听雨 发表于 2022-12-16 22:03
雪梅图优美，借助代码，展示动画效果更美，LRC编辑合拍，歌契合梅之主题，赞一个，问好老师

      谢谢老师的精美点评，晚上好！
页: [1]
查看完整版本: 学习代码音画《一剪梅》