雅致茶音 TO 芊芊
<style>#mydiv {
margin: 80px 0 0 calc(50% - 631px);
width: 1100px;
height: 640px;
border: 1px solid tan;
background: url('https://pic.imgdb.cn/item/64b385511ddac507ccc9cff7.jpg') center/cover no-repeat;
box-shadow: 0 0 8px #000;
position: relative;
overflow: hidden;
--state: paused;
}
.circle {
width: 100px;
height: 100px;
top: 0;left: 0;
border-radius: 50%;
border: 3px solid tan;
border-color: red tan pink purple;
box-sizing: border-box;
background: url('https://pic.imgdb.cn/item/64b1fefe1ddac507cc08942a.jpg') no-repeat center/cover;
display: block;
position: absolute;
offset-path: path('M120 320 Q512 -200, 980 320');
cursor: pointer;
opacity: .95;
animation: rot 6s var(--delay) infinite linear var(--state);
}
.txtBg {
position: absolute;
left: -10px; top: 10px;
font-size: 2.0rem;
color: transparent;
width: 400px;
height: 100px;
line-height: 100px;
text-align: center;
background-image: linear-gradient(90deg, green, olive, transparent, tomato, green);
background-size: 500px 100px;
background-position: 500px 0;
border: 1px solid;
background-clip: text;
-webkit-background-clip: text;
animation: chgc 2s linear infinite;
}
@keyframes chgc {
from { background-position: -500px 0; }
to { background-position: 0 0; }}
@keyframes rot { to { transform: rotate(360deg); } }
#textClock {
position: absolute;
right: 115px; bottom: 264px;
font-size: 20px;
color: Sienna;
font-family:仿宋;
text-shadow:1px 1px 2px #222222;
}
.vid { position: absolute; width: 1100px; height: 655px; top: -100px; right:0px; object-fit: cover; opacity: .35; clip-path: circle(78% at bottom) ;mix-blend-mode: screen;}
</style>
<div id="mydiv">
<div class="txtBg">雅致茶音</div>
<video class="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/52/5ec746f5eec22.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div id="textClock"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1930479885" autoplay="autoplay" loop="loop"></audio>
<script>
(function() {
let spans = [];
let setRgb = () => {
let ar = [];
for(i = 0; i < 3; i ++) {
ar.push(Math.floor(Math.random() * 256));
}
return ar.join(',');
};
let mkEles = (papa,n) => {
Array.from({length: n}).forEach( (item,key) => {
item = document.createElement('span');
item.className = 'circle';
item.style.cssText += `
border-color: rgb(${setRgb()}) rgb(${setRgb()}) rgb(${setRgb()}) rgb(${setRgb()});
offset-distance: ${100 / n * (key + .5)}%;
--delay: ${Math.random() * -6}s;
`;
spans.push(item);
papa.appendChild(item);
});
};
mkEles(mydiv,8);
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
spans.forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());
showTime();
setInterval(showTime, 1000);
function showTime(){
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var day = now.getDay();
var hour = now.getHours();
if(hour < 10) hour = "0" + hour;
var minute = now.getMinutes();
if(minute < 10) minute = "0" + minute;
var second = now.getSeconds();
if(second < 10) second = "0" + second;
document.getElementById("textClock").innerHTML = year + "年" + month + "月" + date + "日 星期" + toHz(day) + "" + hour + ":" + minute + ":" + second;
}
function toHz(num) {
var hz = "日一二三四五六";
return(hz.charAt(num));
}
})();
</script> 发现芊芊的签名很适合做这个效果，就动手试了一个@芊芊{:4_173:} 谢谢黑黑的代码{:4_204:} 很喜欢这个当前日期的效果，就放了上去。原本想弄个时钟的，觉得没地方，再说都是圆的了{:4_173:} 这八个圆挺有意思的。 出大意境了！真的为芉芉量身制作的！@芉芉 收礼开心！ 能用代玛把图意淋漓酣畅的发挥，师妹也是拼了！ 替朋友开心，做得太美了。{:4_204:}{:4_204:}{:4_204:}{:4_204:}{:4_204:}{:4_204:}{:4_204:}{:4_204:}{:4_204:} 梦油 发表于 2023-7-16 16:59
这八个圆挺有意思的。
这八个转动图是黑黑的代码，我套用的{:4_173:} 醉美水芙蓉 发表于 2023-7-16 17:38
欣赏红影美女佳作！
谢谢水芙蓉美女鼓励，晚上好{:4_187:} 樵歌 发表于 2023-7-16 18:17
出大意境了！真的为芉芉量身制作的！@芉芉 收礼开心！
芊芊的头像漂亮，用在这个效果里正好呢{:4_173:} 樵歌 发表于 2023-7-16 18:20
能用代玛把图意淋漓酣畅的发挥，师妹也是拼了！
谢谢师兄，看到师兄又送个礼，我也赶紧跟着送了个{:4_173:} 小文 发表于 2023-7-16 19:18
替朋友开心，做得太美了。{:4_ ...
谢谢小文鼓励，是套用代码做着玩的{:4_173:} 红影 发表于 2023-7-16 20:30
谢谢小文鼓励，是套用代码做着玩的
恩师，晚安！{:4_190:}{:4_187:} 整个贴子悠闲雅致，气质太符合了。。
影子找的这个视频烟雾若有若无，仙得很。。。
即时时钟更添一份生活气息。。
超级棒~~
{:4_199:} 小文 发表于 2023-7-16 21:23
恩师，晚安！
小文晚安{:4_187:} 南无月 发表于 2023-7-16 21:27
整个贴子悠闲雅致，气质太符合了。。
影子找的这个视频烟雾若有若无，仙得很。。。
即时时钟更添一份生活 ...
谢谢月儿，到 这里，一起来杯香茶吧{:4_190:} 红影 发表于 2023-7-16 20:29
芊芊的头像漂亮，用在这个效果里正好呢
头像再漂亮被师妹锦上添花了！ 红影 发表于 2023-7-16 20:30
谢谢师兄，看到师兄又送个礼，我也赶紧跟着送了个
还是师妹的礼物特别新颖好看{:4_189:}