临摹马导H5元素时钟-如果爱还在
本帖最后由 执著 于 2024-5-21 23:48 编辑 <br /><br /><style>#papa {
margin: 0 0 0 calc(50% - 621px);
display: grid;
place-items: center;
width: 1080px;
height: 606px;
background: url('https://pic.imgdb.cn/item/6648c667d9c307b7e908af3e.gif');
overflow: hidden;
position: relative;}
my-clock {
width: 200px;
height: 200px;
border: 10px solid olive;
background: lightgray;
border-radius: 50%;
box-shadow: 0 0 8px black;
display: grid;
place-items: center;
position: relative; left: -420px; top: -180px;
--ww: 200px;
--num_ww: 26px;
--rr: calc((var(--ww) - var(--num_ww)) / 2);
}
my-clock::before, my-clock::after { position: absolute; content: ''; }
my-clock::before {
width: 16px;
height: 16px;
border-radius: 50%;
background: olive;
}
my-clock::after { content: 'HUA CHAO'; top: 65%; color: rgba(0,0,0,.5); }
hand-pointer, kedu-num, kedu-sec { position: absolute; display: block; }
kedu-number {
position: absolute;
width: var(--num_ww);
height: var(--num_ww);
font: normal 20px / var(--num_ww) Arial, sans-serif;
text-shadow: 1px 1px 2px black;
text-align: center;
color: snow;
left: calc(var(--rr) + var(--rr) * var(--cos));
top: calc(var(--rr) + var(--rr) * var(--sin));
--cos: cos(var(--deg));
--sin: sin(var(--deg));
}
kedu-sec { width: 8px; height: 4px; background: olive; }
hand-pointer {
transform-origin: 50% 100%;
background: linear-gradient(snow,olive);
width: var(--hand_ww);
height: calc(var(--ww) / 2 - var(--hand_hh));
top: var(--hand_hh);
animation: rot var(--duration) var(--delay) infinite linear;
}
.vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 60px); object-fit: cover; mix-blend-mode:soft-light; }
@keyframes rot { to {transform: rotate(1turn); } }
</style>
<div id="papa">
<my-clock id="clock"></my-clock>
<audio id="aud" src="https://cccimg.com/view.php/eee020e5c3cd4e252be968c70eb413aa.mp3" autoplay loop></audio>
<video class="vid"src="https://cccimg.com/view.php/973120cf4aded3a0436c437811420746.mp4" disablePictureInPicture autoplay loop muted></video>
</div>
<script>
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#papa',
lrcAr: geci,
btn: '#papa',
lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;',
});
};
let geci =[
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let kedu_ar = , hand_ar = [,,];
let now = new Date();
let secs = -1 * now.getSeconds(), mins = -60 * now.getMinutes(), hrs = -3600 * (now.getHours() % 12) + mins;
let tt_ar = ;
kedu_ar.forEach((item,key) => {
let ele = document.createElement('kedu-number');
ele.innerText = key > 0 ? key : 12;
ele.style.setProperty('--deg', kedu_ar + 'deg');
clock.appendChild(ele);
});
Array.from({length: 60}).forEach((item,key) => {
let ele = document.createElement('kedu-sec');
ele.style.transform = `rotate(${6 * key}deg) translate(${clock.offsetWidth / 2 - 10}px)`;
if(key % 5 === 0) ele.style.background = 'linear-gradient(to right,snow 50%,olive 0)';
clock.appendChild(ele);
});
hand_ar.forEach((item,key) => {
item.push(tt_ar);
let properties = [['--hand_ww','px'],['--hand_hh','px'],['--duration','s'],['--delay','s']];
let ele = document.createElement('hand-pointer');
ele.style.zIndex = key + 1;
properties.forEach((item1,key1) => ele.style.setProperty(properties, hand_ar + properties));
clock.appendChild(ele);
});
</script>
本帖最后由 执著 于 2024-5-21 23:28 编辑
请教老师：为什么背景图片不显示？ https://pic.imgdb.cn/item/6648c667d9c307b7e908af3e.gif
background: url(' https://pic.imgdb.cn/item/6648c667d9c307b7e908af3e.gif');
你的背景语句 background: url(' https://pic.imgdb.cn/item/6648c667d9c307b7e908af3e.gif');
直接background: url('https://pic.imgdb.cn/item/6648c667d9c307b7e908af3e.gif');就可以了吧 本帖最后由 执著 于 2024-5-21 23:51 编辑
红影 发表于 2024-5-21 23:26
你的背景语句 background: url(' https://pic.imgdb.cn/item/6648c667d9c307b7e908af3e.gif');
直接backgr ...
我是那样，但是，发现不显示背景进入编辑时，发现自动加的两个url];我编辑了几次了，第一次发帖自动加的是两个img。。。；第二、三次就是url。不知道什么原因？现在又正常了！！！什么鬼？？？？？ https://s3.bmp.ovh/imgs/2023/05/24/d90e46c0779fdc6b.gif 欣赏老师漂亮的音画制作！
在手机上看“爱心”好像不是这样的颜色。 执著 发表于 2024-5-21 23:31
我是那样，但是，发现不显示背景进入编辑时，发现自动加的两个url];我编辑了几次了，第一次发帖自动加的 ...
现在的很漂亮{:4_187:} 起个网名好难 发表于 2024-5-22 07:23
谢谢老师鼓励{:4_204:}，为了那个背景图的显示我编辑了好多次，不知道为什么，系统自动在背景地址前后加了url代码 梦江南 发表于 2024-5-22 10:09
欣赏老师漂亮的音画制作！
在手机上看“爱心”好像不是这样的颜色。
谢谢老师临帖鼓励{:4_204:}，我还没有用手机进过论坛呢，视力不行 红影 发表于 2024-5-22 10:57
现在的很漂亮
老师总是第一个帮助、鼓励我，衷心感谢哈{:4_204:} 执著 发表于 2024-5-22 21:28
谢谢老师鼓励，为了那个背景图的显示我编辑了好多次，不知道为什么，系统自动在背景地址前后加 ...
和 都是论坛特有的UBB代码，出现这样的问题或许跟发帖的步骤不对有关，又或许是从别处拷贝代码来粘贴是没用“粘贴为纯文本”方式。
现在既然好了也不纠结了。 本帖最后由 执著 于 2024-5-22 23:06 编辑
起个网名好难 发表于 2024-5-22 21:39
和都是论坛特有的UBB代码，出现这样的问题或许跟发帖的步骤不对有关，又或许是从别处拷贝代码来粘贴是 ...
谢谢老师！记得我在本坛第一次发帖时，也遇到过系统自动加img的，但是我进入编辑删除之后就好了。顺便说一下我的发帖步骤请老师看看是否有误：
1、将代码保存为html在浏览器运行无误后（向红影老师学的），保存代码在文本中。
2、发帖：1）勾选：纯文本； 2）点开“附加选项”勾选：HTML 代码； 3）从文本中或编辑器复制发帖代码粘贴到发帖框中。提交确认。
对了, “附加选项”中的“解析图片链接”前的对勾要不要去掉，还有，“禁用链接识别”是不是要勾上？
执著 发表于 2024-5-22 21:32
老师总是第一个帮助、鼓励我，衷心感谢哈
不用客气啊，我不是老师，叫我影子就好。论坛里都是大家一起玩的地方，自在玩就好{:4_187:} 红影 发表于 2024-5-22 22:55
不用客气啊，我不是老师，叫我影子就好。论坛里都是大家一起玩的地方，自在玩就好
对于音画你就是我的老师，好吧，就叫你影子{:4_191:}。我经常用影子系统{:4_176:} 执著 发表于 2024-5-22 23:01
对于音画你就是我的老师，好吧，就叫你影子。我经常用影子系统
我是什么老师啊，我也是跟着学习的啊。执著厉害，我还没用过这个系统呢。{:4_187:} 红影 发表于 2024-5-22 23:06
我是什么老师啊，我也是跟着学习的啊。执著厉害，我还没用过这个系统呢。
这也叫厉害！就是一个软件，因为我有“洁癖”所以才用的。 执著 发表于 2024-5-22 22:24
谢谢老师！记得我在本坛第一次发帖时，也遇到过系统自动加img的，但是我进入编辑删除之后就好了。顺便说 ...
从您的描述看应该没问题呀，至于“解析图片链接”和“禁用链接识别”我都是选中的。 执著 发表于 2024-5-22 23:09
这也叫厉害！就是一个软件，因为我有“洁癖”所以才用的。
去搜了一下，那个系统挺好的，可以防止病毒的侵袭{:4_187:} 起个网名好难 发表于 2024-5-23 07:48
从您的描述看应该没问题呀，至于“解析图片链接”和“禁用链接识别”我都是选中的。
谢谢老师，感恩遇到了您！{:4_204:} 红影 发表于 2024-5-23 10:34
去搜了一下，那个系统挺好的，可以防止病毒的侵袭
{:4_173:}{:4_191:}
页:
[1]
2