中文注册找回密码

斗酒相逢音画设计网

搜索

[单图] 【斗酒相逢音画-五周年庆】【黑师代码】许你一味芬芳 文/心络羽儿 赠/心络羽儿

[复制链接]

贵宾

Rank: 8Rank: 8

UID
5751
主题
8
帖子
436
贡献
3107
阅读权限
150
注册时间
2024-9-9
发表于 2024-9-30 15:32:59 | 显示全部楼层 |阅读模式
本帖最后由 花简静 于 2024-10-3 11:17 编辑

本帖评分记录贡献 收起 理由
令狐冲 + 15
轻音向暖 + 20 亲,你是最棒的
毒药 + 20
贪心的鱼 + 20
飞沫 + 20 亲,你是最棒的
雪儿 + 20 我和小伙伴们都惊呆了
青依 + 20 已加入统计,小手举高高,嗷。。
心络羽儿 + 20 刷图大咖出场费
轻风 + 20 左右横移,天下无敌
竽梵 + 20 亲,你是最棒的
染芷 + 20 亲,你是最棒的
楼主新帖

    万事皆缘,随遇而安
【花简静音画】◇午后时光

贵宾

Rank: 8Rank: 8

UID
5751
主题
8
帖子
436
贡献
3107
阅读权限
150
注册时间
2024-9-9
 楼主| 发表于 2024-9-30 15:33:10 | 显示全部楼层
本帖最后由 花简静 于 2024-10-2 21:07 编辑
  1. <style>
  2. #dbox {
  3.         margin: 130px 0 30px calc(50% - 931px);
  4.         width: 1700px;
  5.         height: 900px;
  6.         background: url('https://642303.freep.cn/642303/tu/20240930xlye.webp') no-repeat center/cover;
  7.         box-shadow: 4px 4px 16px #00000080;
  8.     overflow: hidden;
  9.         position: relative;
  10. }
  11. #player {
  12.         position: absolute;
  13.         width: 130px;
  14.         height: 130px;
  15.         left: calc(50% + 480px);
  16.         top: calc(50% - 120px);
  17.         cursor: pointer;
  18.         display: grid;
  19.         place-items: center;
  20.         filter: drop-shadow(1px 1px 0 #000);
  21.         animation: rot linear 10s infinite var(--state);
  22. }
  23. #player::before {
  24.         position: absolute;
  25.         content: '';
  26.         width: 15px;
  27.         height: 15px;
  28.         border-radius: 50%;
  29.         background: plum;
  30. }

  31. #vid {position: absolute;  width: 100%; height: 100%;mix-blend-mode:screen;left:-100px;opacity: 0.59; -webkit-mask: linear-gradient(to right top, red 5%, transparent 85%, transparent);
  32. }
  33. @keyframes rot { to { transform: rotate(360deg); } }
  34. </style>

  35. <div id="dbox">
  36.         <video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb8fa5f0765.mp4" autoplay loop muted></video>
  37.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1466626521" autoplay loop></audio>
  38.         <svg id="bsvg" width="1700" height="900">
  39.                 <rect x="0" y="0" width="100%" height="100%" rx="8" ry="5" fill="none" stroke="#60949090" stroke-width="8" stroke-dasharray="8 4">
  40.                         <animate attributeName="stroke-dashoffset" from="0" to="-48" dur="2s" begin="0s" repeatCount="indefinite"/>
  41.                 </rect>
  42.         </svg>
  43.         <div id="player"></div>
  44. </div>

  45. <script>
  46. mState = () => {
  47.         dbox.style.setProperty('--state', aud.paused ? 'paused' : 'running');
  48.         aud.paused ? bsvg.pauseAnimations() : bsvg.unpauseAnimations();
  49.         player.title = aud.paused ? '点击播放' : '点击暂停';
  50.         aud.paused ? vid.pause() : vid.play();
  51.        
  52. }
  53. mkParticles = (circles, columns, target) => {
  54.         let size = Math.floor(target.clientWidth / 2 / circles - 10);
  55.         for(let i = 0; i < circles; i ++) {
  56.                 let distance = i * (size + 5) + size + 10;
  57.                 for(let k = 0; k < columns; k ++) {
  58.                         let angle =  360 / columns * k;
  59.                         let span = document.createElement('span');
  60.                         span.style.cssText += `
  61.                                 position: absolute;
  62.                                 width: ${size}px;
  63.                                 height: ${size}px;
  64.                                 background: #${Math.random().toString(16).substring(2,8)};
  65.                                 border-radius: 100% 80%;
  66.                                 transform: rotate(${angle}deg) translate(${distance}px);
  67.                         `;
  68.                         target.appendChild(span);
  69.                 }
  70.         }
  71. };
  72. aud.onplaying = aud.onpause = () => mState();
  73. player.onclick = () => aud.paused ? aud.play() : aud.pause();
  74. mkParticles(4,9,player);
  75. </script>
复制代码
本帖评分记录贡献 收起 理由
青依 + 20 亲,你是最棒的

    万事皆缘,随遇而安
【花简静音画】◇午后时光

尘外尘

小酒窝/依宝

Rank: 8Rank: 8

UID
182
主题
300
帖子
13543
贡献
-29900
阅读权限
255
注册时间
2019-10-12

我心飞翔自游自在轻时光快乐笔小仙女开心哇好心情小资情调莫失莫忘刷图大咖好运风车我爱我家忘忧花一米阳光乐悠悠欢喜猫快乐熊千千结棉花糖花香精灵静水流深燃情首发小酒窝初心小暖雪谷风车春的花信春琉响花曦潮星雪珞花蕾初响风谷晴天

发表于 2024-9-30 15:38:46 | 显示全部楼层
哇,静静宝宝美图图,赞了赞了爱了


人生难得是从容,走自己的路。。。。

尘外尘

小酒窝/依宝

Rank: 8Rank: 8

UID
182
主题
300
帖子
13543
贡献
-29900
阅读权限
255
注册时间
2019-10-12

我心飞翔自游自在轻时光快乐笔小仙女开心哇好心情小资情调莫失莫忘刷图大咖好运风车我爱我家忘忧花一米阳光乐悠悠欢喜猫快乐熊千千结棉花糖花香精灵静水流深燃情首发小酒窝初心小暖雪谷风车春的花信春琉响花曦潮星雪珞花蕾初响风谷晴天

发表于 2024-9-30 15:39:13 | 显示全部楼层
本帖最后由 青依 于 2024-9-30 15:40 编辑

画面质感,光色极美,动画加的精彩。喜欢呢,羽儿宝宝收礼开心快乐
本帖评分记录贡献 收起 理由
心络羽儿 + 10 么么哒


人生难得是从容,走自己的路。。。。

贵宾

Rank: 8Rank: 8

UID
5751
主题
8
帖子
436
贡献
3107
阅读权限
150
注册时间
2024-9-9
 楼主| 发表于 2024-9-30 15:41:03 | 显示全部楼层
@心络羽儿 提供的文字素材,感谢@青依提供的图片素格,有你们真是太好了。。

    万事皆缘,随遇而安
【花简静音画】◇午后时光

尘外尘

小酒窝/依宝

Rank: 8Rank: 8

UID
182
主题
300
帖子
13543
贡献
-29900
阅读权限
255
注册时间
2019-10-12

我心飞翔自游自在轻时光快乐笔小仙女开心哇好心情小资情调莫失莫忘刷图大咖好运风车我爱我家忘忧花一米阳光乐悠悠欢喜猫快乐熊千千结棉花糖花香精灵静水流深燃情首发小酒窝初心小暖雪谷风车春的花信春琉响花曦潮星雪珞花蕾初响风谷晴天

发表于 2024-9-30 15:41:42 | 显示全部楼层
祝福两枚宝宝玩耍快乐,小酒窝五周年快乐冲鸭冲鸭冲鸭


人生难得是从容,走自己的路。。。。

贵宾

Rank: 8Rank: 8

UID
5751
主题
8
帖子
436
贡献
3107
阅读权限
150
注册时间
2024-9-9
 楼主| 发表于 2024-9-30 15:41:43 | 显示全部楼层
青依 发表于 2024-9-30 15:38
哇,静静宝宝美图图,赞了赞了爱了

太喜欢你的图和你提供的素材了,这一张很美 。。

    万事皆缘,随遇而安
【花简静音画】◇午后时光

贵宾

Rank: 8Rank: 8

UID
5751
主题
8
帖子
436
贡献
3107
阅读权限
150
注册时间
2024-9-9
 楼主| 发表于 2024-9-30 15:42:33 | 显示全部楼层
青依 发表于 2024-9-30 15:39
画面质感,光色极美,动画加的精彩。喜欢呢,羽儿宝宝收礼开心快乐

依依你来了,抱一个,看到你嘴角就上扬,开心得很

    万事皆缘,随遇而安
【花简静音画】◇午后时光

尘外尘

小酒窝/依宝

Rank: 8Rank: 8

UID
182
主题
300
帖子
13543
贡献
-29900
阅读权限
255
注册时间
2019-10-12

我心飞翔自游自在轻时光快乐笔小仙女开心哇好心情小资情调莫失莫忘刷图大咖好运风车我爱我家忘忧花一米阳光乐悠悠欢喜猫快乐熊千千结棉花糖花香精灵静水流深燃情首发小酒窝初心小暖雪谷风车春的花信春琉响花曦潮星雪珞花蕾初响风谷晴天

发表于 2024-9-30 15:42:34 | 显示全部楼层
花简静 发表于 2024-9-30 15:41
太喜欢你的图和你提供的素材了,这一张很美 。。

你的也好看喜欢呢。。么么哒


人生难得是从容,走自己的路。。。。

贵宾

Rank: 8Rank: 8

UID
5751
主题
8
帖子
436
贡献
3107
阅读权限
150
注册时间
2024-9-9
 楼主| 发表于 2024-9-30 15:43:16 | 显示全部楼层
青依 发表于 2024-9-30 15:41
祝福两枚宝宝玩耍快乐,小酒窝五周年快乐冲鸭冲鸭冲鸭

依依国庆节一起快乐,小酒窝五周年快乐。。

    万事皆缘,随遇而安
【花简静音画】◇午后时光
使用高级回帖 (可批量传图、插入视频等)

发表回复

游客
请先登录
您需要登录后才可以回帖 登录 | 中文注册

本版积分规则   Ctrl + Enter 快速发布  

关闭

站长推荐上一条 /1 下一条

Powered by Discuz! X3.4  本站已快乐运行: |
Copyright © 2008-2020 Www.Fqingy.Com All Rights Reserved.
快速回复 返回顶部 返回列表