Steps

马黑黑 · 发表于 2024-4-1 22:27

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2024-4-1 22:28

帖子代码

<style>

#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 683px; background: url('https://638183.freep.cn/638183/t24/1/steps.jpeg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; z-index: 1; position: relative; }

#papa::before, #papa::after { content: url('https://638183.freep.cn/638183/small/dolan.png'); position: absolute; left: 480px; z-index: -1; bottom: 80px; transform-origin: 50% 100%; animation: skew .5s infinite alternate var(--state); --scale: 1,1; }

#papa::after { left: 300px; animation-delay: -.5s; --scale: -1,1; }

#papa video { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }

#canv { display: block; position: absolute; bottom: -10px; left: calc(50% - 100px); transform: scale(0.75); cursor: pointer; }

@keyframes skew { from { transform: skew(-1.5deg) scale(var(--scale)); } to { transform: skew(1.5deg) scale(var(--scale)); } }

</style>

</div>

(function() {

let sF = document.createElement('script');

sF.src = 'https://638183.freep.cn/638183/web/js/canvcircle_prg.js';

sF.charset = 'utf-8';

document.body.appendChild(sF);

btnUrl = 'https://638183.freep.cn/638183/small/4yc.png';

})();

</script>

马黑黑 · 发表于 2024-4-1 22:35

canvcircle_prg.js 约定：

canvas画布必须有，严格按 13 行代码那样写；

帖子标签不论，组织好结构就成；

audio音频标签得有，不需要id，程序认页面中出现的第一个；

video视频标签可有可无，无需id；

播放控制器里的图片，通过 22 行设定，btnUrl 变量不能改。如果没有 22 行代码也行，图片将使用默认的 .svg 格式的四叶草。

【注】如果 JS 文档存在自己的空间，建议修改图片引用地址，以保证媒体资源长期有效。