端午·粽子舞

马黑黑

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         margin: auto;
   
4.         width: 1024px;
   
5.         height: 640px;
   
6.         background: url('https://638183.freep.cn/638183/t23/2/zszi.jpeg') no-repeat center/cover,
   
7.                 url('https://638183.freep.cn/638183/t23/2/xzsz.jpg') 340px 100px no-repeat,
   
8.                 url('https://638183.freep.cn/638183/t23/2/xzsz.jpg') 580px 10px no-repeat;
   
9.         background-blend-mode: multiply, multiply;
   
10.         box-shadow: 3px 3px 20px #000;
    
11.         z-index: 1;
    
12.         pointer-events: none;
    
13.         position: relative;
    
14.         --state: paused;
    
15.         --delay: 0s;
    
16. }
    
17. #papa::before, #papa::after {
    
18.         position: absolute;
    
19.         content: '';
    
20.         width: 114px;
    
21.         height: 114px;
    
22.         background: url('https://638183.freep.cn/638183/t23/2/xzsz.jpg') no-repeat center/cover;
    
23.         mix-blend-mode: multiply;
    
24.         pointer-events: auto;
    
25.         cursor: pointer;
    
26.         transform-origin: 50% 100%;
    
27.         animation: dance .5s var(--delay) infinite alternate linear var(--state);
    
28. }
    
29. #papa:before {
    
30.         left: 160px;
    
31.         top: 160px;
    
32. }
    
33. #papa::after {
    
34.         left: calc(50% - 57px);
    
35.         bottom: 20px;
    
36.         --delay: .25s;
    
37. }
    
38. @keyframes dance {
    
39.         from { transform: skew(-5deg); }
    
40.         to {transform: skew(5deg); }
    
41. }
    
42. </style>
    
43. 
    
44. <div id="papa">
    
45. 
    
46. </div>
    
47. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1457817390" autoplay="autoplay" loop="loop"></audio>
    
48. 
    
49. <script>
    
50. (function () {
    
51.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
52.         aud.addEventListener('play', mState, false);
    
53.         aud.addEventListener('pause', mState, false);
    
54.         papa.onclick = () => aud.paused ? aud.play() : aud.pause();
    
55. })();
    
56. </script>
    

复制代码

一斛珠

首席欣赏黑黑老师佳作

一斛珠

一个个晃悠悠的小粽娃可爱极了

一斛珠

赞一个，节日快乐！

马黑黑

一斛珠 发表于 2023-6-22 10:37
首席欣赏黑黑老师佳作

马黑黑

一斛珠 发表于 2023-6-22 10:38
一个个晃悠悠的小粽娃可爱极了

舍不得吃的啦

马黑黑

一斛珠 发表于 2023-6-22 10:38
赞一个，节日快乐！

同乐同乐

马黑黑

醉美水芙蓉 发表于 2023-6-22 12:04
欣赏！老师中午好！

下午好，节日好

南无月

可爱之极的小粽子，吃一个

南无月

我研究下怎么做到摇晃变形又原地不动的。

红影

有趣，这些小粽子一个个都笑嘻嘻的，看着就让人感觉喜悦

梦油

拟人化的粽子娃很可爱！

一斛珠

马黑黑 发表于 2023-6-22 11:01
舍不得吃的啦

是哇，我真想咬一口哒，遗憾舍不得

一斛珠

马黑黑 发表于 2023-6-22 11:01
同乐同乐

走几个话屈原

一斛珠

马黑黑 发表于 2023-6-22 11:01

花花收到，喜欢着

马黑黑

一斛珠 发表于 2023-6-22 14:48
花花收到，喜欢着

马黑黑

一斛珠 发表于 2023-6-22 14:47
走几个话屈原

我就喝个酒，你自己话

马黑黑

一斛珠 发表于 2023-6-22 14:47
是哇，我真想咬一口哒，遗憾舍不得