点点点圆圆

杨帆发表于 2025-11-9 20:38

本帖最后由杨帆于 2025-11-13 15:08 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点点点圆圆</title>
</head>
<body>
<style>
.art{margin: 80px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; position: relative; background:#000 var(--bg1); --bg1:url('https://pic1.imgdb.cn/item/66bb74f6d9c307b7e93b2e7d.gif') no-repeat center/cover; --bg2:url('https://pic1.imgdb.cn/item/6904ba253203f7be00bad60a.jpg') no-repeat center/cover; z-index: 9; overflow: hidden; box-shadow: 2px 2px 8px #000; padding: 25px; display: grid; place-items: center; --state: running;}
.art > #svg2 {position: relative; overflow: hidden; outline: 1px solid DeepSkyBlue;}
#svg2 .lz-container {position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;}
#fullscreen {position: absolute; top: 30px; right: 30px; font: normal 1.5em 楷体; color: #fff; text-shadow: 0 0 3px #000; opacity: 1; cursor: pointer; user-select: none; z-index: 5;}
#fullscreen:hover {font-style: italic;}
#dancer {position: absolute; display: var(--display); opacity: .88; width: 3.3%; height: 5%; animation: rotate 8s linear infinite var(--state); z-index:1; cursor: pointer;}
#dancer:hover {scale:1.2; --state: Paused;}
@keyframes rotate {from {transform: rotate(0);} to {transform: rotate(360deg);}}
.lrc{width:100%; height:70px; overflow: hidden; display: block; position: absolute; bottom:5%; left:20%; z-index: 3; margin: 0 auto;}
.lrc #ullrc{width: 100%; padding: 0; list-style: none; margin: 0;}
.lrc #ullrc li{height: 70px; line-height: 60px; font-family:华文隶书; font-size: 0px; color: #000078; font-weight: bold; list-style-type: none; text-align: center; display: block; width: 100%; margin: 0 auto;}
.lrc #ullrc li.active{font-size: 45px; text-align: center; color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen) 50%/100px 80px; -webkit-background-clip:text; filter:drop-shadow(#000 1px 0 0) drop-shadow(#000 0 1px 0) drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px 0);}
.lz {border-radius: 50%; width:5px; height:5px; background: lightblue; animation: flash 1s infinite alternate; position: absolute;}
@keyframes flash {from {opacity: 1; rotate:15deg;} to {opacity: 0; rotate:45deg;}}
#text{position: absolute; width:110px; height:380px; top:20px; left:10px; display: grid; place-items: center; padding: 20px;}
#text span {font: bold 3.5em/1.5 STLiti; color: transparent; background:url('https://bbs.cnzv.cc/up/upload/pic/12/20250302-ef202b8fd27dcf032201019d42dabd9e.jpg') repeat center/cover; background-clip: text; -webkit-background-clip: text; -webkit-text-stroke: 1px #fff; writing-mode: vertical-rl; letter-spacing: 30px;}
</style>
<div id="art" class="art">
<img id="dancer" src="https://bbs.cnzv.cc/up/upload/pic/62/20251109-8c585378b79150cbdde431c3d606048e.gif" title='北极星' alt="" style="right: 38%; top: 3%;">
<svg id="svg1" width="12vw" height="4vw"></svg> 
<svg id="svg2" width="75vw" height="50vw">
   <foreignObject width="100%" height="100%">
         <div class="lz-container" xmlns="http://www.w3.org/1999/xhtml"></div>
         <div id="text"><span>北斗七星</span></div>
   </foreignObject>
   <marker id="m2" markerWidth="10" markerHeight="10" refX="5" refY="5" orient="auto">
         <polygon points="0 0, 0 10, 10 5" fill="red"></polygon>
   </marker>
   <line id="line1" x1="890" y1="160" x2="850" y2="40" stroke="deepskyblue" stroke-width="3" stroke-linecap="round" style="marker-end: url(#m2);"><title>北极星：此方向从天枢起5倍斗口距离</title></line>
</svg>
<span id="fullscreen">全屏欣赏</span>
<div class="lrc">
   <ul id="ullrc"></ul>
</div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=2063851410.mp3" autoplay loop></audio>
<script type="module">
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
import TZ from 'https://638183.freep.cn/638183/web/tz/tz.v3.js?v1';
const tz = TZ.TZ('art');
tz.lzRan(200,'.lz-container',{className: 'lz', delay: -2});
var dr1 = draw.dr('svg1');
var stop = `<stop offset="0%" stop-color="lightgreen"></stop><stop offset="50%" stop-color="lightgreen" stop-opacity="0.5"></stop><stop offset="51%" stop-color="olive"></stop><stop offset="100%" stop-color="olive"></stop>`;
dr1.gradient('radialGradient',{id: 'rGrd'},stop);
dr1.text('点点点圆圆',15,40,'url(#rGrd)','Lime').set('font-size',30);
dr1.draw('ellipse',{id: 'c1', cx: 45, cy: 30, rx: 35, ry: 20, fill: 'Gold', stroke:'OrangeRed', 'stroke-width':2}).style('opacity: .3;cursor: pointer;');
dr1.title('单击切换','circle');
dr1.draw('rect',{id: 'rt1', x: 5, y: 5, width: 170, height: 50, fill: 'none', stroke: 'peru', 'stroke-width': 2, 'stroke-dasharray': 5});
dr1.draw('animate',{attributeName: 'stroke-dashoffset', values: `0;${rt1.getTotalLength()}`, dur: '20s', repeatCount: 'indefinite'}).addTo('rt1');
dr1.js(`
var isRunning = true;
var isMarkerShow = true;
const m2 = document.getElementById('m2');
const line1 = document.getElementById('line1');
const ullrc = document.getElementById('ullrc');
const text = document.getElementById('text');
const particles = document.querySelectorAll('.lz');
dancer.onclick = c1.onclick = () => {
if(aud.paused){
   aud.play(); art.style.background = 'var(--bg1)';
   ullrc.style.display = 'block'; text.style.display = 'block';
   particles.forEach(particle => {
         particle.style.display = 'block';
         particle.style.animationPlayState = 'running';
   });
} else {
   aud.pause(); art.style.background = 'var(--bg2)';
   ullrc.style.display = 'none'; text.style.display = 'none';
   particles.forEach(particle => {
         particle.style.display = 'none';
         particle.style.animationPlayState = 'paused';
   });
}
isRunning ? svg1.pauseAnimations() : svg1.unpauseAnimations();
isRunning = !isRunning;
dancer.style.setProperty('--display',aud.paused ? 'none':'block');
const allCircles = document.querySelectorAll('#svg2 .dynamic-circle');
allCircles.forEach(circle => circle.remove());
c_idx = 0;
isMarkerShow = !isMarkerShow;
const opacity = isMarkerShow ? 1 : 0;
m2.setAttribute('opacity', opacity);
line1.setAttribute('opacity', opacity);
}
`);
var dr2 = draw.dr('svg2');
var c_idx = 0;
dr2.title('单击生成点点圆','svg');
svg2.onclick = (e) => {
c_idx++;
var x = e.offsetX, y = e.offsetY, r = Math.random() * 40 +10, color = `#${Math.random().toString(16).substring(2,8)}`;
dr2.circle(x,y,r,color).title('点点圆' + c_idx).set('class', 'dynamic-circle');
};
var lrc = `
运动真奇妙 - 俞芊芊
词：陈爽/恩汛
曲：陈爽
录音：陈爽
和声伴唱：杨扬
总制作人：陈爽
出品：中国爽乐坊唱片
太阳起得早
别当小懒猫
快来一起加加油
做做健身操
稍息预备好
勇敢向前跑
让我们一起来感受
汗水的味道
运动真奇妙
身体在舞蹈
我们都要做一个
健康的乖宝宝
运动真奇妙
绽放出欢笑
所有病菌都赶跑
永远没烦恼
一二三四扭一扭腰
二二三四抖一抖脚
三二三四甩一甩手
四二三四快乐来到
太阳起得早
别当小懒猫
快来一起加加油
做做健身操
稍息预备好
勇敢向前跑
让我们一起来感受
汗水的味道
运动真奇妙
身体在舞蹈
我们都要做一个
健康的乖宝宝
运动真奇妙
绽放出欢笑
所有病菌都赶跑
永远没烦恼
运动真奇妙
身体在舞蹈
我们都要做一个
健康的乖宝宝
运动真奇妙
绽放出欢笑
所有病菌都赶跑
永远没烦恼
`;
function $(id){return document.getElementById(id);}
function getLrcArray(){
var parts = lrc.split("\n");
for(let index=0;index<parts.length;index++){
   parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content){
   var twoParts = content.split("]");
   var time = twoParts.substr(1);
   var timeParts = time.split(":");
   var seconds = +timeParts;
   var min = +timeParts;
   seconds = min * 60 + seconds;
   var words = twoParts;
   return{seconds: seconds, words: words};
}
}
var lrcArray = getLrcArray();
function inputLrc(){
for(let index=0;index<lrcArray.length;index++){
   var li = document.createElement("li");
   li.innerText = lrcArray.words;
   $("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition(){
var index = getLrcIndex();
if(index == -1) return;
var lrc_li_height = 70, lrc_ul_height = 60;
var top = index * lrc_li_height + lrc_li_height / 3 - lrc_ul_height / 3;
if(top < 0) top = 0;
$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi) activeLi.classList.remove("active");
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;
for(var index=0;index<lrcArray.length;index++){
   if(lrcArray.seconds > time) return index - 1;
}
}
$("aud").ontimeupdate = setPosition;
let fs = true;
let fsTimer;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', art.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
fs = !fs;
};
art.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => {
   fullscreen.style.opacity = '0';
}, 3000);
});
document.addEventListener('fullscreenchange', () => {
fs = !document.fullscreenElement;
fullscreen.innerText = fs ? '全屏欣赏' : '退出全屏';
});
</script>
</body>
</html>

红影发表于 2025-11-9 21:02

好可爱的童声歌曲，点击点点的小圆圈，北斗七星就变成了点点小朋友，真可爱的宝宝。
欣赏杨帆好帖{:4_199:}

红影发表于 2025-11-9 21:06

点击后也就暂停了，只剩那小宝贝了，从帖子制作也看得出杨帆对宝贝的喜爱，真好{:4_187:}

小辣椒 发表于 2025-11-9 21:43

杨帆好棒，才看见黑黑的点点，这里已经做出来了{:4_199:}

杨帆发表于 2025-11-9 21:45

红影发表于 2025-11-9 21:02
好可爱的童声歌曲，点击点点的小圆圈，北斗七星就变成了点点小朋友，真可爱的宝宝。
欣赏杨帆好帖{:4_199: ...

此贴旨在学习、尝试马老师svg讲座里的一些知识。

点点宝宝也喜欢。谢谢影子鼓励{:4_187:}

杨帆发表于 2025-11-9 21:48

小辣椒发表于 2025-11-9 21:43
杨帆好棒，才看见黑黑的点点，这里已经做出来了

只是在学习、尝试马老师讲的一些svg知识。谢谢小辣椒鼓励{:4_204:}

澜天发表于 2025-11-9 23:41

可以满屏点圆点玩
有趣
{:4_178:}

杨帆发表于 2025-11-9 23:49

澜天发表于 2025-11-9 23:41
可以满屏点圆点玩
有趣

呵呵，开心第一，谢谢澜天老师鼓励{:4_190:}

澜天发表于 2025-11-10 08:54

杨帆发表于 2025-11-9 23:49
呵呵，开心第一，谢谢澜天老师鼓励

开心快乐

梦江南 发表于 2025-11-10 09:18

真棒，这帖也只有杨帆才能做出来。谢谢杨帆的精彩分享！为可爱的宝宝点赞！{:4_187:}

小文发表于 2025-11-10 09:25

好玩！喜欢！{:4_204:}

偶然~ 发表于 2025-11-10 11:21

音画唯美

偶然~ 发表于 2025-11-10 11:21

制作大气

偶然~ 发表于 2025-11-10 11:21

感谢杨帆带来的精彩，辛苦了，祝你健康幸福

杨帆发表于 2025-11-10 12:16

梦江南发表于 2025-11-10 09:18
真棒，这帖也只有杨帆才能做出来。谢谢杨帆的精彩分享！为可爱的宝宝点赞！

谢谢江南鼓励，祝开心天天{:4_204:}

杨帆发表于 2025-11-10 12:17

小文发表于 2025-11-10 09:25
好玩！喜欢！

谢谢小文鼓励，祝开心天天{:4_191:}

杨帆发表于 2025-11-10 12:18

偶然~ 发表于 2025-11-10 11:21
感谢杨帆带来的精彩，辛苦了，祝你健康幸福

谢谢偶然~超版鼓励，祝开心天天{:4_191:}

偶然~ 发表于 2025-11-10 14:35

杨帆发表于 2025-11-10 12:18
谢谢偶然~超版鼓励，祝开心天天

{:4_180:}

霜染枫丹 发表于 2025-11-11 19:54

既有趣味性更具知识性，很精致的制作，欣赏赞佩。

杨帆发表于 2025-11-11 21:34

霜染枫丹发表于 2025-11-11 19:54
既有趣味性更具知识性，很精致的制作，欣赏赞佩。

谢谢霜染枫丹老师雅评与鼓励，祝开心天天{:4_204:}

页: [1] 2

花潮论坛's Archiver

点点点圆圆