Ever Green

马黑黑 发表于 2024-9-22 07:32

马黑黑 发表于 2024-9-22 07:33

本帖最后由马黑黑于 2024-9-22 07:41 编辑 <br /><br /><h2>帖子代码</h2>
<div class="hE"><pre>
<style>
#tz { margin: 30px 0 30px calc(50% - 721px); width: 1280px; height: 700px; background: radial-gradient(transparent 75%, transparent, rgba(0,128,0,.75)), url('https://638183.freep.cn/638183/t24/webp2/evergreen.webp') no-repeat center/cover; box-shadow: 2px 2px 6px #333; display: grid; place-items: center; z-index: 1; position: relative; --opacity: 1; }
#tz::before, #tz::after { position: absolute; content: ''; }
#tz::before { inset: 0; background: url('https://638183.freep.cn/638183/web/svg/leaf.svg') no-repeat center/cover; opacity: var(--opacity); transition: 1.5s; }
#tz::after { left: 30%; width: 90px; height: 90px; background: white; border-radius: 50%; bottom: 18%; box-shadow: inset 10px 10px 50px green, 0 0 36px #111; animation: move 6s ease infinite alternate var(--state); }
.player { position: absolute; width: 200px; height: 200px; cursor: pointer; transition: .6s; opacity: .8; z-index: 10; animation: rot 8s linear infinite var(--state); --deg: 1turn; }
.player:nth-of-type(2) { width: 120px; height: 120px; left: 30%; bottom: 9%; animation-delay: -3s; }
.player:nth-of-type(3) { width: 120px; height: 120px; right: 30%; bottom: 9%; animation-delay: -5s; --deg: -1turn; }
@keyframes rot { to { transform: rotate(var(--deg)); } }
@keyframes move {
from { left: 30%; transform: rotate(0deg); }
to { left: calc(70% - 90px); transform: rotate(360deg); }
}
</style>

<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=444548196" autoplay loop></audio>
<img class="player" src="https://638183.freep.cn/638183/web/svg/p1.svg" alt="" title="播放/暂停" />
<img class="player" src="https://638183.freep.cn/638183/web/svg/p1.svg" alt="" title="播放/暂停" />
<img class="player" src="https://638183.freep.cn/638183/web/svg/p1.svg" alt="" title="播放/暂停" />
</div>

<script>
var players = document.querySelectorAll('.player');
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js2024/fscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({
papa: '#tz',
scale: players,
css: 'left: 50%; bottom: 20px; transform: translate(-50%); --bg: transparent; --color: lightblue;',
});
mState = () => {
tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
tz.style.setProperty('--opacity', aud.paused ? '0' : '1');
players.forEach(player => player.title = aud.paused ? '播放' : '暂停');
};
aud.onplaying = aud.onpause = () => mState();
players.forEach(player => 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-9-22 07:40

本帖：

（一）飘落的绿叶是svg图案，作为背景图片用在了帖子容器伪元素 ::before；

（二）左右滚动的小绿球是纯CSS效果，使用帖子容器伪元素 ::after 做成；

（三）三个小播的图案来源于svg图像，分别使用img标签装载；

（四）帖子子元素的定位部分使用百分比，这样在帖子容器伸缩时子元素的位置能基本保持在原有位置。

朵拉发表于 2024-9-22 08:00

老师不愧是理科生创意嘎嘎棒{:4_178:}

起个网名好难 发表于 2024-9-22 08:11

http://5b0988e595225.cdn.sohucs.com/images/20180609/f85bb2266e7e495d8a8203f3e12af903.gif

看标题让人想起几年前在苏伊士运河搁浅的长赐号（EVERGREEN）{:5_117:}

梦江南 发表于 2024-9-22 08:32

背景图很特别，小圆球很乖，老师真是个代码魔盒！{:4_190:}

马黑黑 发表于 2024-9-22 08:40

朵拉发表于 2024-9-22 08:00
老师不愧是理科生创意嘎嘎棒

文科生才有创意哒

马黑黑 发表于 2024-9-22 08:40

梦江南发表于 2024-9-22 08:32
背景图很特别，小圆球很乖，老师真是个代码魔盒！

果酱果酱

马黑黑 发表于 2024-9-22 08:40

起个网名好难发表于 2024-9-22 08:11
看标题让人想起几年前在苏伊士运河搁浅的长赐号（EVERGREEN）

{:4_196:}

红影发表于 2024-9-22 09:07

这个帖子里用了那么多的动态，都是用代码来模拟的，这个太厉害了，也从中感受到了svg的应用的妙处{:4_199:}

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

那些个落叶去看了，竟然是一个个写的，太不容易了。
30片叶子，每个都需要给它设定位置，还要逐个设定延迟时间，还要设定总的循环时间，来让它们连绵不绝，这个很需要点耐心呢。黑黑辛苦了{:4_187:}{:4_190:}

红影发表于 2024-9-22 09:12

那个小播转轴是昨天黑黑讲课时讲到的，今天就用到帖子里来了个实例展示。
小播用了3个，让大家看到如何让3个的转向不同，大小不同，和延迟转动带来的效果，这个太好了{:4_199:}

红影发表于 2024-9-22 09:17

这样的背景和绿色小球的设计也十分奇妙，灵思妙想的体现{:4_199:}
有了绿色小球，仿佛就规定了这些横板的作用{:4_173:}

红影发表于 2024-9-22 09:18

小播像神秘的时间转轴，让小球无休止地运动中。这个制作非常神奇{:4_199:}

花飞飞 发表于 2024-9-22 09:30

马黑黑发表于 2024-9-22 07:40
本帖：

（一）飘落的绿叶是svg图案，作为背景图片用在了帖子容器伪元素 ::before；

{:4_173:}这个说明好详细。。
老师最近是把SVG图片效果用到了极致，事实证明也真的是好用。
作品除了背景是外来的，别的元素如叶子，小球，小播，背景的暗角效果，全都是纯代码手工制作，非常矜贵~~

马黑黑 发表于 2024-9-22 09:32

花飞飞发表于 2024-9-22 09:30
这个说明好详细。。
老师最近是把SVG图片效果用到了极致，事实证明也真的是好用。
作品除了背 ...

老贵了{:4_170:}

马黑黑 发表于 2024-9-22 09:33

红影发表于 2024-9-22 09:18
小播像神秘的时间转轴，让小球无休止地运动中。这个制作非常神奇

这个创意来的自然：看猫咪玩球的时候想到的

马黑黑 发表于 2024-9-22 09:34

红影发表于 2024-9-22 09:17
这样的背景和绿色小球的设计也十分奇妙，灵思妙想的体现
有了绿色小球，仿佛就规定了这些横板的 ...

不然搁板太空了

花飞飞 发表于 2024-9-22 09:34

贴子画面，意境，音乐，无一不美~~
白老师手巧，心细，呈现的作品就是这么高端大气。。

马黑黑 发表于 2024-9-22 09:34

红影发表于 2024-9-22 09:07
这个帖子里用了那么多的动态，都是用代码来模拟的，这个太厉害了，也从中感受到了svg的应用的妙处

CSS和svg两相结合

页: [1] 2 3

花潮论坛's Archiver

Ever Green