学习闲云老师代码音画

微尘

月婵 发表于 2024-11-21 19:46
谢谢版版赏评支持鼓励！

月版进步好快啊。能够制作多张图片的音画了。

月婵

微尘 发表于 2024-11-21 19:55
月版进步好快啊。能够制作多张图片的音画了。

慢慢跟老师学习吧。

月婵

咕咚来了 发表于 2024-11-21 18:48
我的代码简单，什么浏览器都能播放。

嗯嗯，好的。

微尘

月婵 发表于 2024-11-21 19:58
慢慢跟老师学习吧。

努力吧，坚持下去，一定会收到好的效果的。

老钟

欣赏老师制作的代码音画，制作精美，点赞！

筱亭

月婵学习的真棒，图美曲美！欣赏学习了！求代码

庶民

真的很美，成功。

月婵

老钟 发表于 2024-11-22 03:07
欣赏老师制作的代码音画，制作精美，点赞！

谢谢版版赏评支持鼓励！问好！

月婵

筱亭 发表于 2024-11-22 03:08
月婵学习的真棒，图美曲美！欣赏学习了！求代码

嗯嗯 我保存着：
闲云老师风景图片代码：
<div style="position:absolute;z-index:32768;background:none;width:100%;left:-2px;margin-top:86px;">
<style>
  .container0 {
  margin: 50px auto;
  width: 1194px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 14px #880000; overflow: hidden;
  height: 550px;
border: 1px solid;
background: #333 url('https://pic.imgdb.cn/item/671ce499d29ded1a8c4a28e2.jpg') no-repeat center/cover; overflow: hidden;
  position: relative;
}
.photo {
  position: absolute;
width: 100%;
  height: 100%;transform: scale3d(0,0,-300) skew(0,60deg);
  animation: round 32s infinite;
  opacity: 0;
}
@keyframes round {
  5% {opacity: 1;}
12% {opacity: 1;transform:  scale(1)}
18% {opacity: 0;transform:  scale(3)}
}
img:nth-child(1) {animation-delay: 28s;}
img:nth-child(2) {animation-delay: 24s;}
img:nth-child(3) {animation-delay: 20s;}
img:nth-child(4) {animation-delay: 16s;}
img:nth-child(5) {animation-delay: 12s;}
img:nth-child(6) { animation-delay: 8s;}
img:nth-child(7) {animation-delay: 4s;}
img:nth-child(8) {animation-delay: 0s;}
    </style>
<div class="container0">
  <img alt="" class="photo" src="https://pic.imgdb.cn/item/673c7a33d29ded1a8cdf05af.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/673c7a33d29ded1a8cdf0600.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/673c7a34d29ded1a8cdf062a.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/673c7a34d29ded1a8cdf0668.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/673c7a34d29ded1a8cdf06b9.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/673c7a34d29ded1a8cdf06ee.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/673c7a35d29ded1a8cdf072d.jpg"> <img alt="" class="photo" src="https://pic.imgdb.cn/item/673c7a35d29ded1a8cdf0771.jpg">
<div class="container">
      <div class="btn">
<span id="bf" onclick="bf();" style="width: 120px; height: 120px;z-index: 550;position: absolute;top:-60px; left:880px;"></span>
        <span id="bf" onclick="rbf();"></span>
      </div>        
  <div class="items">
<div class="lrc">
        <ul id="ullrc">
         </ul>
      </div>
</div>
</div>   
</div></div><br>
<div style="height:700px"></div>
</div></div><audio id="aud" src="http://img1.oldkids.cn/upload/2024/05/14/blog_260856579_20240514142919791.mp3" autoplay="autoplay" loop="loop" controls="controls" style="left:0px; width:1px; position:relative; top:0px;">
</audio>

月婵

筱亭 发表于 2024-11-22 03:08
月婵学习的真棒，图美曲美！欣赏学习了！求代码

没有专业老师的好，我是笨办法，可是好用。呵呵呵。