加林森 发表于 2022-1-29 12:42

公园风景（根据马黑黑的教程制作）

<style type="text/css">
.mBox {
/*      主窗体
      width 和 height 与图片统一尺寸
*/
      margin: 10px auto;
      width: 640px;
      height: 400px;
      position: relative; /* 相对定位：不能没有这句 */
      overflow: hidden;
      border: 1px solid navy;
      box-shadow: 2px 2px 4px 1px #444;
}
.pBox {
/*      图片盒子
      时长可修改， alternate不要就一直滚动
*/
      position: absolute;
      animation: Roll 25s linear infinite alternate;
      display: block;
}
.pBox:hover {
      cursor: pointer;
      animation-play-state: paused;
}
.pBox img {
/*      图片统一尺寸
      注意主窗体的尺寸和它一致
*/
      width: 640px;
      height: 400px;
      float: left;
}
@keyframes Roll {
      from { transform: translateY(0); }
      to { transform: translateY(-50%); }
}
</style>

<div class="mBox">
      <div id="pBox" class="pBox">
                <img alt="" src="https://pic.imgdb.cn/item/61f4bf032ab3f51d91f32884.jpg" /><br>
                <img alt="" src="https://pic.imgdb.cn/item/61f4beae2ab3f51d91f2de17.jpg" /><br>
                <img alt="" src="https://pic.imgdb.cn/item/61f4be5c2ab3f51d91f29e8d.jpg" /><br>
                <img alt="" src="https://pic.imgdb.cn/item/61f4c1252ab3f51d91f4fce1.jpg" /><br>
                <img alt="" src="https://pic.imgdb.cn/item/61f4c1aa2ab3f51d91f56c62.jpg" /><br>
                <img alt="" src="https://pic.imgdb.cn/item/61f4c2682ab3f51d91f613fd.jpg" /><br>
                <img alt="" src="https://pic.imgdb.cn/item/61f4c2de2ab3f51d91f67c70.jpg" /><br>
                <img alt="" src="https://pic.imgdb.cn/item/61f4c34f2ab3f51d91f6d7c4.jpg" /><br>
                <img alt="" src="https://pic.imgdb.cn/item/61f4c3cb2ab3f51d91f73fbe.jpg" /><br>
                <img alt="" src="https://pic.imgdb.cn/item/61f4c4472ab3f51d91f7b3fc.jpg" />
      </div>
</div>
<audio id="ktv" src="https://www.joy127.com/url/88436.mp3" loop="loop" autoplay="autoplay"></audio>

<script language="javascript">
var ktv = document.getElementById('ktv');
document.getElementById('pBox').onclick=function(){ ktv.paused ? ktv.play() : ktv.pause(); }
</script>

加林森 发表于 2022-1-29 12:42

@马黑黑

马黑黑 发表于 2022-1-29 12:49

队长拍的图片不错，做的帖子非常精美

加林森 发表于 2022-1-29 12:52

马黑黑 发表于 2022-1-29 12:49
队长拍的图片不错，做的帖子非常精美

谢谢老黑鼓励。我是用华为手机拍摄的。

马黑黑 发表于 2022-1-29 13:44

加林森 发表于 2022-1-29 12:52
谢谢老黑鼓励。我是用华为手机拍摄的。

不错的

加林森 发表于 2022-1-29 13:47

马黑黑 发表于 2022-1-29 13:44
不错的

嗯嗯，我又要出去锻炼了。

红影 发表于 2022-1-29 13:50

滚动图片制作，真不错，而且鼠标移上去会暂停。队长图片拍的好，制作也很棒{:4_199:}

加林森 发表于 2022-1-29 13:51

红影 发表于 2022-1-29 13:50
滚动图片制作，真不错，而且鼠标移上去会暂停。队长图片拍的好，制作也很棒

谢谢红影支持！{:4_187:}我出去锻炼去了。

樵歌 发表于 2022-1-29 14:33

拍的不错呵，照小黑的方法弄，真好。

红影 发表于 2022-1-29 15:14

加林森 发表于 2022-1-29 13:51
谢谢红影支持！我出去锻炼去了。

好的，我这里下雨了，羡慕队长那里天气好。

加林森 发表于 2022-1-29 16:01

红影 发表于 2022-1-29 15:14
好的，我这里下雨了，羡慕队长那里天气好。

回来了，今天我们这里是大太阳。

加林森 发表于 2022-1-29 16:21

樵歌 发表于 2022-1-29 14:33
拍的不错呵，照小黑的方法弄，真好。

就是，效果很好的。

加林森 发表于 2022-1-29 16:22

红影 发表于 2022-1-29 15:14
好的，我这里下雨了，羡慕队长那里天气好。

我是风雨无阻的。

马黑黑 发表于 2022-1-29 16:30

加林森 发表于 2022-1-29 13:47
嗯嗯，我又要出去锻炼了。

好好锻炼

加林森 发表于 2022-1-29 16:36

马黑黑 发表于 2022-1-29 16:30
好好锻炼

锻炼回来了。

马黑黑 发表于 2022-1-29 17:52

加林森 发表于 2022-1-29 16:36
锻炼回来了。

欢迎回来

加林森 发表于 2022-1-29 17:57

马黑黑 发表于 2022-1-29 17:52
欢迎回来

我去制作了一个新帖送安宁将军了。

马黑黑 发表于 2022-1-29 17:58

加林森 发表于 2022-1-29 17:57
我去制作了一个新帖送安宁将军了。

应该的应该的

加林森 发表于 2022-1-29 18:21

马黑黑 发表于 2022-1-29 17:58
应该的应该的

嗯嗯

红影 发表于 2022-1-29 20:22

加林森 发表于 2022-1-29 16:01
回来了，今天我们这里是大太阳。

我们这都下好几天雨了。
页: [1] 2
查看完整版本: 公园风景（根据马黑黑的教程制作）