亚伦影音工作室 发表于 2025-7-6 16:46

图片下倒影

本帖最后由 亚伦影音工作室 于 2025-7-6 21:44 编辑 <br /><br /><style>

.reflect-below-p {margin: 10px-300px;
      width: 1086px;
      height: 1200px;
      background:#000;
    transform: scale(1.2);
      box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; position: relative; overflow: hidden;
    padding-bottom: 0px;
}
.reflect-below { width: 1086px;
      height: 600px;
    -webkit-box-reflect: below;

}

</style>
<strong>下倒影</strong>
<p class="reflect-below-p"><img src="https://pic.imgdb.cn/item/670538b3d29ded1a8cb9488b.jpg" class="reflect-below"></p>

梦油 发表于 2025-7-6 16:51

欣赏佳作，问候亚伦。

亚伦影音工作室 发表于 2025-7-6 16:52

本帖最后由 亚伦影音工作室 于 2025-7-6 17:08 编辑 <br /><br /><style>

.pa{margin: 10px-380px;
      width: 1400px;
      height: 600px;
      background:#000;
      box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; position: relative; overflow: hidden;
    padding-bottom: 0px;
}
.reflect-right { width:700px;
      height: 600px;-webkit-box-reflect: below 0 linear-gradient(transparent, white);
    -webkit-box-reflect: right;

}

</style>
<strong>右倒影</strong>
<div class="pa"><img src="https://pic1.imgdb.cn/item/6805ae0458cb8da5c8ba9e15.webp" class="reflect-right"></div>

老谟深虑 发表于 2025-7-6 18:31

         欣赏老师的代码，收藏学习了。

杨帆 发表于 2025-7-6 19:31

问好亚伦老师，谢谢精彩分享{:4_190:}

红影 发表于 2025-7-6 20:27

第一张图图做上下倒影很适合呢，下面一张图图也很适合左右倒影。

红影 发表于 2025-7-6 20:27

欣赏亚伦老师好帖{:4_199:}

亚伦影音工作室 发表于 2025-7-6 22:35

本帖最后由 亚伦影音工作室 于 2025-7-6 22:39 编辑 <br /><br /><style>
#papa { margin: 10px -300px; width: 1286px;height: 620px;background: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b00bd68e548ae4437df7fc217308c8c4.jpg) no-repeat center/cover; box-shadow: 2px 2px 8px #000;overflow: hidden; z-index: 1; position: relative;}

#reflect-right { width:1286px;
       position:absolute;margin: 0px0px;
    -webkit-box-reflect:left;

}
</style>
<div id="papa">
<marquee   behavior="scroll"scrollamount="8"height=620>
<img src="https://pic1.imgdb.cn/item/685cdd5258cb8da5c8724514.jpg" id="reflect-right">
</marquee>
</div>

老谟深虑 发表于 2025-7-7 15:22

本帖最后由 老谟深虑 于 2025-7-7 15:24 编辑

亚伦影音工作室 发表于 2025-7-6 22:35
本帖最后由 亚伦影音工作室 于 2025-7-6 22:39 编辑
#papa { margin: 10px -300px; width: 1286px;hei ...
         老师再做一个加上多行同步歌词的，谢谢！
页: [1]
查看完整版本: 图片下倒影