梦中的婚礼

马黑黑

马黑黑

参考代码

1. <style>
   
2. #papa {
   
3.         --state: paused;
   
4.         margin: 30px auto;
   
5.         width: 1024px;
   
6.         height: 640px;
   
7.         border: 1px solid tan;
   
8.         border-image: linear-gradient(35deg,blue,orange,magenta,green,red) 2;
   
9.         background: url('https://638183.freep.cn/638183/t23/webp1/cc.webp') center/cover no-repeat;
   
10.         box-shadow: 2px 4px 10px #000;
    
11.         cursor: pointer;
    
12.         overflow: hidden;
    
13.         display: flex;
    
14.         place-items: center;
    
15.         perspective: 4px;
    
16.         perspective-origin: 600px 118px;
    
17.         animation: hue 28s infinite linear var(--state);
    
18.         position: relative;
    
19. }
    
20. 
    
21. .deck{
    
22.         position: absolute;
    
23.         width: 100%;
    
24.         height: 100%;
    
25.         transform-style: preserve-3d;
    
26.         animation: move 12s infinite linear var(--state);
    
27. }
    
28. 
    
29. .deck:nth-child(2){
    
30.         animation-delay: -4s;
    
31. }
    
32. 
    
33. .item {
    
34.         position: absolute;
    
35.         width: 100%;
    
36.         height: 100%;
    
37.         background: url('https://638183.freep.cn/638183/t23/webp1/cc.webp') center/cover no-repeat;
    
38.         background-size: cover;
    
39.         opacity: .6;
    
40.         animation: fade 12s infinite linear var(--state);
    
41. }
    
42. 
    
43. .deck:nth-child(2) .item {
    
44.         animation-delay: -4s;
    
45. }
    
46. 
    
47. .item-right {
    
48.         transform: rotateY(90deg) translateZ(500px);
    
49. }
    
50. 
    
51. .item-left {
    
52.         transform: rotateY(-90deg) translateZ(500px);
    
53. }
    
54. 
    
55. .item-top {
    
56.         transform: rotateX(90deg) translateZ(500px);
    
57. }
    
58. 
    
59. .item-bottom {
    
60.         transform: rotateX(-90deg) translateZ(500px);
    
61. }
    
62. 
    
63. .item-middle {
    
64.         transform: rotateX(180deg) translateZ(1000px);
    
65. }
    
66. 
    
67. @keyframes move {
    
68.         0%{ transform: translateZ(-500px) rotate(0deg); }
    
69.         100%{ transform: translateZ(500px) rotate(360deg); }
    
70. }
    
71. 
    
72. @keyframes fade {
    
73.         0%{ opacity: 0; }
    
74.         25%, 60%{ opacity: .6; }
    
75.         100%{ opacity: 0; }
    
76. }
    
77. 
    
78. @keyframes hue {
    
79.         0% { filter: hue-rotate(0); }
    
80.         100% { filter: hue-rotate(360deg); }
    
81. }
    
82. </style>
    
83. 
    
84. <div id="papa">
    
85.         <div class="deck">
    
86.                 <div class="item item-right"></div>
    
87.                 <div class="item item-left"></div>         
    
88.                 <div class="item item-top"></div>
    
89.                 <div class="item item-bottom"></div>
    
90.                 <div class="item item-middle"></div>               
    
91.         </div>
    
92.         <div class="deck">
    
93.                 <div class="item item-right"></div>
    
94.                 <div class="item item-left"></div>         
    
95.                 <div class="item item-top"></div>
    
96.                 <div class="item item-bottom"></div>         
    
97.                 <div class="item item-middle"></div>               
    
98.         </div>
    
99. </div>
    
100. 
     
101. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=34341360" autoplay="autoplay" loop="loop"></audio>
     
102. 
     
103. <script>
     
104. let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
     
105. papa.onclick = () => aud.paused ? aud.play() : aud.pause();
     
106. aud.addEventListener('play', mState, false);
     
107. aud.addEventListener('pause', mState, false);
     
108. </script>

复制代码

庶民

做梦娶媳妇

马黑黑

庶民 发表于 2023-4-9 10:57
做梦娶媳妇

红影

黑黑又一个新效果，给新娘子头上加了那么大的效果，让美人如梦里看花啊

马黑黑

红影 发表于 2023-4-9 11:39
黑黑又一个新效果，给新娘子头上加了那么大的效果，让美人如梦里看花啊

差不多吧

上海朝阳

玄迷，这太美了

马黑黑

上海朝阳 发表于 2023-4-9 12:28
玄迷，这太美了

中午好

雨中悄然

这是用原图做的发散特效

梦缘

皇冠的光辉，很有趣，欣赏问好！

马黑黑

梦缘 发表于 2023-4-9 16:35
皇冠的光辉，很有趣，欣赏问好！

下午好

樵歌

终于见到 黑黑娘子了，虽然雾里看花，但真美呵。祝福你

马黑黑

樵歌 发表于 2023-4-9 18:53
终于见到 黑黑娘子了，虽然雾里看花，但真美呵。祝福你

谢谢

马黑黑

雨中悄然 发表于 2023-4-9 14:13
这是用原图做的发散特效

这门道你看出来了，眼光犀利

樵歌

马黑黑 发表于 2023-4-9 18:58
谢谢

这是补办的婚礼么，怎么说也得请几桌客呗

马黑黑

樵歌 发表于 2023-4-9 19:23
这是补办的婚礼么，怎么说也得请几桌客呗

现在早已不兴这个了

小辣椒

黑黑这个同一个图图可以做出这个万丈光芒的效果，

小辣椒

我先去自己试一下效果再回来

红影

马黑黑 发表于 2023-4-9 12:16
差不多吧

那么多的动态效果，倒还都协调一致

小辣椒

这个效果不错，我用了各种图图测试，出来的效果不一样的