玉美人
本帖最后由 起个网名好难 于 2024-6-13 09:24 编辑 <br /><br /><meta name="referrer" content="never" /><style>
#oBlk {
width:1280px;height:720px;margin:80px 0 40px calc(50% - 721px);
background-color:hsla(60, 45%, 85%,0.6);
overflow:hidden;box-shadow:4px 4px 10px black;
border-radius:64px;position:relative;
.ymr {
width: 200px;
height: 280px;
border-radius:32px;
overflow:hidden;opacity:0;
background: linear-gradient(#fc0, #f0c);
offset-path: path("M 1130 250 A 640 360 0 0 1 150 250 A 640 360 0 0 1 1130 250");
offset-rotate: 0deg;
position:absolute;
}
#vid {width:120%;position:absolute;left:0;bottom:0px;}
}
</style>
<div id="oBlk">
<video id='vid' autoplay src="https://img.tukuppt.com/video_show/2269348/00/08/33/5d1da57b47b06.mp4" loop ></video>
<img class="ymr" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7QZoTFQAoiazcZmtCCZBYVPWHiaxV8ze6oxZYJkztXiaZuRkSdVpAxDOPCQJdT3uPMqWp72m0KYoPO4w/640" />
<img class="ymr" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7QZoTFQAoiazcZmtCCZBYVPWAciayPSnDicKmZ6FwPUz6KZgAlUhic9kSzCjGlO9KicyqccJ0OtZJGnP0w/640" />
<img class="ymr" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7QZoTFQAoiazcZmtCCZBYVPW1Eo91rJXdRCoPQ5Knicib1yib7JGyK2LhYw5WLv6AMIKU2UkeLQ3iam1Lw/640" />
<img class="ymr" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7QZoTFQAoiazcZmtCCZBYVPWTsiaLuOfZ88bZuWib5d4ZJtOfxBlicNcntEINH5lLicKdHrlAMIKUkodyA/640" />
<img class="ymr" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7QZoTFQAoiazcZmtCCZBYVPWcSwb7KiaUkQLXyrFA6bIbnwat5bH9UPb987amjlnkop6fEkYVciagFbg/640" />
<img class="ymr" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7QZoTFQAoiazcZmtCCZBYVPWaLEjRkGtJ5WFPjkrrUhu0rFzTUvJZSIklvefTFlpBiczic2SVQWxGF8Q/640" />
<img class="ymr" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7QZoTFQAoiazcZmtCCZBYVPW6VIRPHibAPmth7QzSTsVAEOgSAxQweOGg4D4W2KxbCkgKaxBOOibpNgw/640" />
<img class="ymr" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7QZoTFQAoiazcZmtCCZBYVPWmX8ZQGaJmPiaVj91yFRdWs68y4wnRo4EPlZMoF8ZO70EDXMRL6SWFWA/640" />
<img class="ymr" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7QZoTFQAoiazcZmtCCZBYVPWAKsXW3a5sGdYibTGfxL8ibzficOVF5aUdboJ1146Y8UUvWGUX5unShTdw/640" />
<img class="ymr" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7QZoTFQAoiazcZmtCCZBYVPWLjlh9v5ADhF5ZyIR1xgodzv0y3dGric6sTdpDFcr20VS7icozF3J1loQ/640" />
</div>
<script>
{
let keyFrames = [
{offsetDistance:'0%',opacity:0, transform:'scale(1)'},
{offset:.25, opacity:1, transform:'scale(2)'},
{offset:.5, offsetDistance:'50%', transform:'scale(1)'},
{offset:.75, opacity:1, transform:'scale(0.5)'},
{offset:1,offsetDistance:'100%',opacity:0, transform:'scale(1)'}
];
let EffectTiming =
{
duration: 25000,
iterations:1,
delay: 0,
fill: 'forwards'
};
let ani = null, idx = 0;
let mObjs = document.querySelectorAll(".ymr");
(function chg_cur_pic() {
if(ani) ani.cancel();
ani = mObjs.animate(keyFrames, EffectTiming);
ani.onfinish = chg_cur_pic;
idx++; idx %= mObjs.length;
})();
oBlk.onclick = () => {vid.paused ? (vid.play(), ani.play()) : (vid.pause(), ani.pause())}
}
</script> 好美的玉美人啊，晶莹剔透，秀色可餐。
欣赏难难好帖{:4_199:} 红影 发表于 2024-6-13 09:52
好美的玉美人啊，晶莹剔透，秀色可餐。
欣赏难难好帖
谢谢支持欣赏！
上午好！ 起个网名好难 发表于 2024-6-13 10:12
谢谢支持欣赏！
上午好！
这些图图太美了，谢谢难难带来的美好{:4_187:} 红影 发表于 2024-6-13 16:08
这些图图太美了，谢谢难难带来的美好
让美人们都出来亮个像{:5_117:} 吧知道什么原因，我界面看不全，我现在是电脑 https://pic.imgdb.cn/item/666ac0ebd9c307b7e9898782.jpg
小辣椒 发表于 2024-6-13 17:48
吧知道什么原因，我界面看不全，我现在是电脑
电脑看不全？是不是浏览器版本低了。
我用手机也看过是正常的。 小辣椒 发表于 2024-6-13 17:51
看截图似乎是帖子的CSS设置没起作用（没加载完全），刷新下再看看。 起个网名好难 发表于 2024-6-13 16:48
让美人们都出来亮个像
真的好美呢，我看得目不转睛{:4_173:} 红影 发表于 2024-6-13 18:56
真的好美呢，我看得目不转睛
练习路径移动的帖子 起个网名好难 发表于 2024-6-13 19:07
练习路径移动的帖子
这个很好啊，移动中变小，好像就离得远了似的。 红影 发表于 2024-6-13 19:43
这个很好啊，移动中变小，好像就离得远了似的。
还是不太好，到前台来的时候没停留一下。 起个网名好难 发表于 2024-6-13 19:54
还是不太好，到前台来的时候没停留一下。
也不错，停留的话时间就太长了，还记着看下一个玉美人呢{:4_189:} 这个系列是红楼人物吧，有一个特别像我心目中的黛玉。 晶莹剔透的玉玲珑！还分别出来亮相。太美了! 樵歌 发表于 2024-6-13 20:30
晶莹剔透的玉玲珑！还分别出来亮相。太美了!
确实很养眼 起个网名好难 发表于 2024-6-13 20:45
确实很养眼
吸睛{:4_189:} 漂亮的玉美人，个个自动亮相，赞啦！{:4_187:} 梦江南 发表于 2024-6-14 13:51
漂亮的玉美人，个个自动亮相，赞啦！
都出来秀一下{:5_106:}
页:
[1]