楼主: 花简静

花简静贴子代码及说明汇总(翻页有新贴)

[复制链接]
一叶知秋 版主勋章 山高为峰 山外有山 樱果相依 24 46 47 48 闲花落
 楼主| 发表于 2024-6-1 23:05 | 显示全部楼层
本帖最后由 花简静 于 2024-6-1 23:07 编辑







点评
回复

使用道具

一叶知秋 版主勋章 山高为峰 山外有山 樱果相依 24 46 47 48 闲花落
 楼主| 发表于 2024-6-1 23:05 | 显示全部楼层
本帖最后由 花简静 于 2024-6-1 23:08 编辑

<style>     .papa { margin: 130px 0 20px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/20240601xu02.webp') no-repeat center/cover; box-shadow: 2px 2px 6px #000; overflow: hidden; z-index: 1; position: relative; display: grid; }     #g1 { position: absolute; left: 104px; bottom: 500px; width: 432px; opacity : 0.05; transition: 3s; }     #papa:hover #g1 { opacity: 0.9; }     #g1:hover { width: 144px; }     #aCanv { position: absolute; bottom: 10px; right: -51px; opacity: .5; transform: scale(0.6, 0.6);}     .vid { position: absolute; top: 0; width: 100%; height: calc(100% + 80px); object-fit: cover; mix-blend-mode: screen; transform: rotateX(180deg);} #mypic1 { position: absolute; width: 360px;left: calc(90% - 30px); top: 20px; animation: fly 40s alternate infinite forwards; --xx: 0;z-index: 10;}     #mypic2 { position: absolute; width: 360px;left: calc(10% - 160px); top: 00px; animation: fly 30s alternate infinite forwards; transform: scale(-1,1);--xx: 90%;z-index: 10;}       @keyframes fly { to { left: var(--xx); } } </style>   <div class="papa">     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2143833548" autoplay loop></audio>     <video class="vid" src="https://img.tukuppt.com/video_show/2414777/00/01/68/5b4865ba379a9.mp4" autoplay loop muted></video>     <img id="mypic1" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" />     <img id="mypic2" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" />     <img id="g1" src="https://642303.freep.cn/642303/tu/xugreen0.png" alt="" />     <canvas id="aCanv" width="660" height="520"></canvas> </div>   <script> var sF = document.createElement('script'); sF.charset = 'utf-8'; sF.src = 'https://638183.freep.cn/638183/web/js2024/canvcircle_lrc.js'; document.body.appendChild(sF); //播放器颜色设置 //var colors = { track: 'snow', prog: 'purple', btn: 'white', text: 'silver' }; //歌词 var lrcAr = [     [-2.43,"单曲:路过我心间--赠:清梦",3.2],     [3.62,"歌手:于袅袅 专辑:路过我心间",1.4],     [4.98,"作词:贪食忘忧果的人",1.9],     [6.86,"作曲:帛书 帛心 胡家富",1.1],     [7.93,"学习黑师240527虞姬叹弧形歌词效果",4.4],     [12.31,"初春的时节雨总很缠绵",4.6],     [18.04,"伸了一个懒腰走到窗跟前",4.7],     [23.9,"绿深深浅浅空气好新鲜",4.6],     [29.48,"就像你的味道很清甜",3.5],     [35.18,"白卫衣清新自然",2.5],     [37.8,"笑起来眉眼弯弯",2.9],     [41.49,"天呐怎么办好喜欢",3.2],     [46.64,"你就路过我心间",2.4],     [49.47,"像雨滴滑落屋檐",2.5],     [52.51,"又氤氲了地面如你温润腼腆",5.4],     [58.32,"你就路过我心间",2.4],     [61.27,"像纸鸢唤醒了春天",2.4],     [64.42,"融化所有冰雪一夜之间",4.0],     [69.34,"单曲:路过我心间--赠:清梦",10.0],     [79.44,"学习黑师240527虞姬叹弧形歌词效果",14.7],     [94.01,"歌循环几遍忘摁切换键",4.8],     [99.98,"怎么你还没有路过我窗前",4.7],     [105.84,"手中笔擅自勾勒你侧脸",4.7],     [111.4,"偷写你的名字千万遍",3.6],     [117.04,"忽然间你晃过眼前",2.7],     [119.83,"笑看我吃惊一脸",3.0],     [123.4,"天呐怎么办被看穿",3.2],     [128.52,"你就路过我心间",2.5],     [131.4,"像雨滴滑落屋檐",2.4],     [135.05,"又氤氲了地面如你温润腼腆",4.7],     [140.34,"你就路过我心间",2.3],     [143.33,"像纸鸢唤醒了春天",2.3],     [146.45,"融化所有冰雪一夜之间",3.9],     [152.02,"你就路过我心间",2.2],     [155.26,"像笔尖划过纸面",2.1],     [158.17,"书写了诗一篇写你我的缱绻",4.8],     [163.65,"你就路过我心间",3.0],     [166.64,"世间最美好的少年",2.3],     [169.92,"让我们肩并肩细数这流年",3.8] ]; </script> <Br><Br><Br><Br><Br><Br>
点评
回复

使用道具

一叶知秋 版主勋章 山高为峰 山外有山 樱果相依 24 46 47 48 闲花落
 楼主| 发表于 2024-6-1 23:05 | 显示全部楼层
本帖最后由 花简静 于 2024-6-1 23:11 编辑


<style>
        .papa { margin: 130px 0 20px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/20240601xu02.webp') no-repeat center/cover; box-shadow: 2px 2px 6px #000; overflow: hidden; z-index: 1; position: relative; display: grid; }
        #g1 { position: absolute; left: 104px; bottom: 500px; width: 432px; opacity : 0.05; transition: 3s; }
        #papa:hover #g1 { opacity: 0.9; }
        #g1:hover { width: 144px; }
        #aCanv { position: absolute; bottom: 10px; right: -51px; opacity: .5; transform: scale(0.6, 0.6);}
        .vid { position: absolute; top: 0; width: 100%; height: calc(100% + 80px); object-fit: cover;  mix-blend-mode: screen; transform: rotateX(180deg);}
    #mypic1 { position: absolute; width: 360px;left: calc(90% - 30px); top: 20px;  animation: fly 40s alternate infinite forwards; --xx: 0;z-index: 10;}
        #mypic2  { position: absolute; width: 360px;left: calc(10% - 160px); top: 00px;  animation: fly 30s alternate infinite forwards; transform: scale(-1,1);--xx: 90%;z-index: 10;}


        @keyframes fly { to { left: var(--xx); } }
</style>

<div class="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2143833548" autoplay loop></audio>
        <video class="vid" src="https://img.tukuppt.com/video_show/2414777/00/01/68/5b4865ba379a9.mp4" autoplay loop muted></video>
        <img id="mypic1" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" />
        <img id="mypic2" src="https://pic.imgdb.cn/item/62479cbe27f86abb2adbb9bd.gif" alt="" />
        <img id="g1" src="https://642303.freep.cn/642303/tu/xugreen0.png" alt="" />
        <canvas id="aCanv" width="660" height="520"></canvas>
</div>

<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js2024/canvcircle_lrc.js';
document.body.appendChild(sF);
//播放器颜色设置
//var colors = { track: 'snow', prog: 'purple', btn: 'white', text: 'silver' };
//歌词
var lrcAr = [
        [-2.43,"单曲:路过我心间--赠:清梦",3.2],
        [3.62,"歌手:于袅袅 专辑:路过我心间",1.4],
        [4.98,"作词:贪食忘忧果的人",1.9],
        [6.86,"作曲:帛书 帛心 胡家富",1.1],
        [7.93,"学习黑师240527虞姬叹弧形歌词效果",4.4],
        [12.31,"初春的时节雨总很缠绵",4.6],
        [18.04,"伸了一个懒腰走到窗跟前",4.7],
        [23.9,"绿深深浅浅空气好新鲜",4.6],
        [29.48,"就像你的味道很清甜",3.5],
        [35.18,"白卫衣清新自然",2.5],
        [37.8,"笑起来眉眼弯弯",2.9],
        [41.49,"天呐怎么办好喜欢",3.2],
        [46.64,"你就路过我心间",2.4],
        [49.47,"像雨滴滑落屋檐",2.5],
        [52.51,"又氤氲了地面如你温润腼腆",5.4],
        [58.32,"你就路过我心间",2.4],
        [61.27,"像纸鸢唤醒了春天",2.4],
        [64.42,"融化所有冰雪一夜之间",4.0],
        [69.34,"单曲:路过我心间--赠:清梦",10.0],
        [79.44,"学习黑师240527虞姬叹弧形歌词效果",14.7],
        [94.01,"歌循环几遍忘摁切换键",4.8],
        [99.98,"怎么你还没有路过我窗前",4.7],
        [105.84,"手中笔擅自勾勒你侧脸",4.7],
        [111.4,"偷写你的名字千万遍",3.6],
        [117.04,"忽然间你晃过眼前",2.7],
        [119.83,"笑看我吃惊一脸",3.0],
        [123.4,"天呐怎么办被看穿",3.2],
        [128.52,"你就路过我心间",2.5],
        [131.4,"像雨滴滑落屋檐",2.4],
        [135.05,"又氤氲了地面如你温润腼腆",4.7],
        [140.34,"你就路过我心间",2.3],
        [143.33,"像纸鸢唤醒了春天",2.3],
        [146.45,"融化所有冰雪一夜之间",3.9],
        [152.02,"你就路过我心间",2.2],
        [155.26,"像笔尖划过纸面",2.1],
        [158.17,"书写了诗一篇写你我的缱绻",4.8],
        [163.65,"你就路过我心间",3.0],
        [166.64,"世间最美好的少年",2.3],
        [169.92,"让我们肩并肩细数这流年",3.8]
];
</script>
<Br><Br><Br><Br><Br><Br>

红色部分是空中的“许”字
蓝色部分是空中的飞鸟
粉色部分是歌词弧度和小播位置

点评
回复

使用道具

一叶知秋 版主勋章 山高为峰 山外有山 樱果相依 24 46 47 48 闲花落
 楼主| 发表于 2024-6-1 23:05 | 显示全部楼层
点评
回复

使用道具

一叶知秋 版主勋章 山高为峰 山外有山 樱果相依 24 46 47 48 闲花落
 楼主| 发表于 2024-6-2 19:05 | 显示全部楼层
点评
回复

使用道具

一叶知秋 版主勋章 山高为峰 山外有山 樱果相依 24 46 47 48 闲花落
 楼主| 发表于 2024-6-2 19:05 | 显示全部楼层
点评
回复

使用道具

一叶知秋 版主勋章 山高为峰 山外有山 樱果相依 24 46 47 48 闲花落
 楼主| 发表于 2024-6-2 19:05 | 显示全部楼层
点评
回复

使用道具

一叶知秋 版主勋章 山高为峰 山外有山 樱果相依 24 46 47 48 闲花落
 楼主| 发表于 2024-6-2 19:05 | 显示全部楼层
点评
回复

使用道具

一叶知秋 版主勋章 山高为峰 山外有山 樱果相依 24 46 47 48 闲花落
 楼主| 发表于 2024-6-2 19:05 | 显示全部楼层
点评
回复

使用道具

一叶知秋 版主勋章 山高为峰 山外有山 樱果相依 24 46 47 48 闲花落
 楼主| 发表于 2024-6-2 19:05 | 显示全部楼层
点评
回复

使用道具

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|千山论坛

GMT+8, 2024-9-20 22:56

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表