Mars

马黑黑 发表于 2024-10-9 07:46

马黑黑 发表于 2024-10-9 07:47

<h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#tz { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/4/mars.jpg') no-repeat center/105% 105%; box-shadow: 4px 4px 8px #00000080; z-index: 1; display: grid; place-items: center; animation: chgsize 5s linear alternate infinite var(--state); position: relative; }
#player { position: absolute; filter: drop-shadow(0 0 2px black); }
#minHand, #secHand { animation: rot var(--tt) linear infinite var(--state); }
#line { transition: .5s; }
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes chgsize { to { background-size: 100% 100%; } }
</style>

<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2095456478" autoplay loop></audio>
<svg id="player" width="200" height="200" viewBox="-50 -50 100 100">
<title id="ctt">play</title>
<defs>
<linearGradient id="bg1" x1="0" x2="0.5" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="50%" stop-color="green"/>
<stop offset="100%" stop-color="darkred"/>
</linearGradient>
</defs>
<circle cx="0" cy="0" r="44" fill="none" stroke="url(#bg1)" stroke-width="6"/>
<line id="minHand" x1="0" y1="0" x2="0" y2="-32" stroke="red" stroke-width="3" stroke-linecap="round"/>
<line id="secHand" x1="0" y1="0" x2="0" y2="-38" stroke="orange" stroke-width="2" stroke-linecap="round"/>
<circle cx="0" cy="0" r="6" fill="orange"/>
<line id="line" x1="-5" y1="25" x2="5" y2="25" stroke="yellow"/>
</svg>
</div>

<script>
mState = () => {
tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
ctt.textContent = aud.paused ? '点击播放' : '点击暂停';
}
aud.oncanplaythrough = () => {
minHand.style.setProperty('--tt', `${aud.duration}s`);
secHand.style.setProperty('--tt', `${aud.duration / 10}s`);
};
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => line.setAttribute('transform', `rotate(${Math.random() * 720})`);
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

梦江南 发表于 2024-10-9 08:20

老师早上好！辛苦了！{:4_187:}

红影发表于 2024-10-9 09:35

这个奇妙，分针秒针相差十倍地转着，转玩一圈正好音乐播完。
还有根小黄线在其中穿梭，这根小黄线的看着更难，0到720间用0.5秒完成吧。
很奇妙的设计{:4_199:}

红影发表于 2024-10-9 09:37

背景的放大缩小也很奇妙，呼应了svg制作的线性渐变圆圈和小指针们的行动。
黑黑的制作都是技术感满满{:4_199:}

梦江南 发表于 2024-10-9 11:23

红影发表于 2024-10-9 09:37
背景的放大缩小也很奇妙，呼应了svg制作的线性渐变圆圈和小指针们的行动。
黑黑的制作都是技术感满满{:4_1 ...

您的眼货正好，背景图只是微微地在动，不注意的是看不出的。

小辣椒 发表于 2024-10-9 11:38

有点像时钟效果了{:4_199:}

马黑黑 发表于 2024-10-9 12:08

小辣椒发表于 2024-10-9 11:38
有点像时钟效果了

{:4_191:}

马黑黑 发表于 2024-10-9 12:08

梦江南发表于 2024-10-9 08:20
老师早上好！辛苦了！

{:4_190:}

马黑黑 发表于 2024-10-9 12:11

红影发表于 2024-10-9 09:35
这个奇妙，分针秒针相差十倍地转着，转玩一圈正好音乐播完。
还有根小黄线在其中穿梭，这根小黄线的看着更 ...

0.5秒是 transition 属性值，这个用来规定元素完成一个动作的总用时。svg元素使用了这个 transition 属性之后和HTML元素一样有效果，这是因为svg子元素可以被DOM管理

花飞飞 发表于 2024-10-9 19:28

这个背景是星云，隐约的缩放让这朵云活了起来。。
跟巨大的天空之眼似的，十分特别~~
@keyframes chgsize { to { background-size: 100% 100%; } }
背景变到100，仔细看了一下，起始数据原来是105~~
所以背景变化不算太大。。

花飞飞 发表于 2024-10-9 19:29

小播原来全是代码完成的模拟时钟~~
整个时钟线性渐变，红色，绿色，暗红色。。小播外圆填充了这个渐变色，宽度为6，
外星配色再次出现。。乐一个。。。老师是真的喜欢这个配色呀。。

花飞飞 发表于 2024-10-9 19:32

两根针长度不同，宽度不同，颜色不同，速度有10倍差别。。。有较明显的区别~~
中间有个小圆做为按纽。。。橙色的。。
和圆一起完成表盘。。{:4_173:}

花飞飞 发表于 2024-10-9 19:33

还有一条小小线，跟条小黄鱼似的，绕着圈游。。
不是匀速的，慢的时候像是在发呆，快的时候溜得飞快。
看了半天没找到小黄鱼为啥用这个节奏跑。。
井line { transition: .5s; }0.5秒，只有这一句就有这样的效果了？{:4_170:}

红影发表于 2024-10-9 20:34

梦江南发表于 2024-10-9 11:23
您的眼货正好，背景图只是微微地在动，不注意的是看不出的。

还是看得出的呢，很奇妙的{:4_173:}

红影发表于 2024-10-9 20:37

马黑黑发表于 2024-10-9 12:11
0.5秒是 transition 属性值，这个用来规定元素完成一个动作的总用时。svg元素使用了这个 transition 属性 ...

是啊，然后svg元素的设计是区间变数，结果让小黄线那么灵活{:4_187:}

朵拉发表于 2024-10-9 20:43

炫丽的效果，学习下{:4_190:}

马黑黑 发表于 2024-10-9 20:44

花飞飞发表于 2024-10-9 19:28
这个背景是星云，隐约的缩放让这朵云活了起来。。
跟巨大的天空之眼似的，十分特别~~
@keyframes chgsize ...

太大了看着炫目

马黑黑 发表于 2024-10-9 20:44

朵拉发表于 2024-10-9 20:43
炫丽的效果，学习下

{:4_190:}

马黑黑 发表于 2024-10-9 20:44

红影发表于 2024-10-9 20:37
是啊，然后svg元素的设计是区间变数，结果让小黄线那么灵活

它起点缀作用

页: [1] 2 3 4 5

花潮论坛's Archiver

Mars