中文注册找回密码

斗酒相逢音画设计网

搜索

[单图] 【斗酒相逢音画-五周年庆】【黑师代码】123期 风起时,隐入尘烟 文/雪轻旋

[复制链接]

贵宾

Rank: 8Rank: 8

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

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

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

贵宾

Rank: 8Rank: 8

UID
5751
主题
8
帖子
436
贡献
3107
阅读权限
150
注册时间
2024-9-9
 楼主| 发表于 2024-10-3 11:32:05 | 显示全部楼层
本帖最后由 花简静 于 2024-10-5 20:54 编辑
  1. <style>
  2. #tz {
  3.         margin: 130px 0 30px calc(50% - 931px);
  4.         width: 1700px;
  5.         height: 900px;
  6.         background: url('https://642303.freep.cn/642303/tu/20241002yangDJ.webp') no-repeat center/cover;
  7.         box-shadow: 3px 3px 6px rgba(0,0,0,.6);
  8.         overflow: hidden;
  9.         z-index: 1;
  10.         position: relative;
  11. }
  12. #vid1 {
  13.         position: absolute;
  14.         width: 100%;
  15.         height: 100%;
  16.         object-fit: cover;
  17.         mix-blend-mode: overlay;
  18.         pointer-events: none;
  19.         opacity: 0.39;
  20.         -webkit-mask: linear-gradient(to left top, red 5%, transparent 85%, transparent);
  21. }
  22. #vid2 {
  23.         position: absolute;
  24.         width: 100%;
  25.         height: 100%;
  26.         object-fit: cover;
  27.         mix-blend-mode: screen;
  28.         pointer-events: none;
  29.         opacity: 0.09;
  30.         -webkit-mask: linear-gradient(to right top, red 5%, transparent 85%, transparent);
  31. }
  32. #player {
  33.         position: absolute;
  34.         left: calc(50% + 30px);
  35.         top: calc(50% - 30px);
  36.         cursor: pointer;
  37.         opacity: 0.99;
  38.         animation: rot 10s linear infinite var(--state);
  39. }
  40. use:nth-child(odd) { --bg:         Moccasin; }
  41. use:nth-child(even) { --bg: Salmon; }
  42. @keyframes rot {
  43.         to { transform: rotate(360deg); }
  44. }
  45. </style>

  46. <div id="tz">
  47.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1873048038" autoplay loop></audio>
  48.         <video id="vid1" src="https://bpic.588ku.com/video_listen/588ku_preview/22/05/23/11/59/33/video628b06a50eec2.mp4" autoplay loop muted></video>
  49.         <video id="vid2" src="https://img.tukuppt.com/video_show/2269348/00/14/66/5e5a2fd36a145.mp4" autoplay loop muted></video>
  50.         <svg id="player" width="100" height="100" viewBox="0 0 100 100">
  51.                 <title id="tt">播放/暂停</title>
  52.                 <defs>
  53.                         <g id="p1" fill="none" stroke="var(--bg)" stroke-width="2" stroke-linecap="round" stroke-dasharray="4 6">
  54.                                 <path id="p1" d="M5 50 Q25 135,50 50 T 95 50">
  55.                                         <animate attributeName="stroke-dashoffset" from="80" to="0" dur="2s" repeatCount="indefinite" />
  56.                                 </path>
  57.                         </g>
  58.                 </defs>
  59.                 <use href="#p1" transform="rotate(0 50 50)"></use>
  60.                 <use href="#p1" transform="rotate(30 50 50)"></use>
  61.                 <use href="#p1" transform="rotate(60 50 50)"></use>
  62.                 <use href="#p1" transform="rotate(90 50 50)"></use>
  63.                 <use href="#p1" transform="rotate(120 50 50)"></use>
  64.                 <use href="#p1" transform="rotate(150 50 50)"></use>
  65.         </svg>
  66. </div>

  67. <script>
  68. mState = () => {
  69.         tz.style.setProperty('--state', aud.paused ? 'paused' : 'running');
  70.         aud.paused ? (player.pauseAnimations(), vid1.pause(), vid2.pause()) : (player.unpauseAnimations(), vid1.play(), vid2.play());
  71.         tt.textContent = aud.paused ? '点击播放' : '点击暂停';
  72. };
  73. aud.onplaying = aud.onpause = () => mState();
  74. player.onclick = () => aud.paused ? aud.play() : aud.pause();
  75. </script>
复制代码
本帖评分记录贡献 收起 理由
轻风 + 20 寂寂时光,淡淡其华,轻轻飘散,随风入画

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

贵宾

Rank: 8Rank: 8

UID
5751
主题
8
帖子
436
贡献
3107
阅读权限
150
注册时间
2024-9-9
 楼主| 发表于 2024-10-3 11:33:42 | 显示全部楼层
小酒窝五周年快乐,朋友们国庆假期快乐。

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

尘外尘

小酒窝/依宝

Rank: 8Rank: 8

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

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

发表于 2024-10-3 12:08:29 | 显示全部楼层
首席欣赏静儿宝宝的精美佳作赞了爱了


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

尘外尘

小酒窝/依宝

Rank: 8Rank: 8

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

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

发表于 2024-10-3 12:10:04 | 显示全部楼层
背景质感,色彩好看,文字排版也高级。。稀罕


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

尘外尘

小酒窝/依宝

Rank: 8Rank: 8

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

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

发表于 2024-10-3 12:10:47 | 显示全部楼层
代码运用娴熟,整个画面非常唯美。。


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

尘外尘

小酒窝/依宝

Rank: 8Rank: 8

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

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

发表于 2024-10-3 12:11:09 | 显示全部楼层
静儿宝宝抹图快乐,小酒窝五周年快乐冲鸭冲鸭冲鸭冲鸭冲鸭


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

尘外尘

小酒窝/依宝

Rank: 8Rank: 8

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

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

发表于 2024-10-3 12:11:59 | 显示全部楼层
小气泡添加好美。棒棒哒


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

尘外尘

Rank: 8Rank: 8

UID
155
主题
558
帖子
6601
贡献
105113
阅读权限
255
注册时间
2018-10-9

静水流深小酒窝初心小暖雪谷风车春琉响花曦潮星雪珞花蕾初响风谷晴天

发表于 2024-10-3 17:18:30 | 显示全部楼层
看着画面,秋意深浓了
背景有种油画般的美
疯图开心开心~
痛而不言是一种智慧,笑而不语是一种豁达!

尘外尘

Rank: 8Rank: 8

UID
219
主题
196
帖子
9393
贡献
63228
阅读权限
255
注册时间
2019-10-13

花香精灵小酒窝初心小暖雪谷风车春琉响花曦潮花蕾初响

发表于 2024-10-3 20:51:26 | 显示全部楼层
腻害了,这代码给你玩得如此顺溜
我愿以指代灯,将花盛放在诗行!谢谢雷帅的超凡手艺!
使用高级回帖 (可批量传图、插入视频等)

发表回复

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

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

关闭

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

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