明月出天山

马黑黑

马黑黑

代码

1. <style>
   
2.         #mydiv {
   
3.                 margin: auto;
   
4.                 width: 760px;
   
5.                 height:300px;
   
6.                 border: 1px solid gray;
   
7.                 position: relative;
   
8.         }
   
9.         txt-box {
   
10.                 position: absolute;
    
11.                 display: grid;
    
12.                 place-items: center;
    
13.                 left: var(--xx);
    
14.                 top: 10px;
    
15.                 width: 50px;
    
16.                 height: 50px;
    
17.                 font: normal 30px sans-serif;
    
18.                 transition: .5s;
    
19.                 animation: move 5s var(--delay) linear infinite alternate;
    
20.         }
    
21.         txt-box::after {
    
22.                 position: absolute;
    
23.                 content: '';
    
24.                 inset: -6px;
    
25.                 border: thick groove gold;
    
26.                 border-radius: 20% 60%;
    
27.                 animation: rot 5s var(--delay) linear infinite alternate;
    
28.         }
    
29.         txt-box:hover {
    
30.                 filter: invert(100%) drop-shadow(0 -10px 30px black);
    
31.         }
    
32.         @keyframes move { to { top: 240px; } }
    
33.         @keyframes rot { to { transform: perspective(1000px) rotateY(60deg) rotateZ(360deg); } }
    
34. </style>
    
35. 
    
36. <div id="mydiv"></div>
    
37. 
    
38. <script>
    
39. (function() {
    
40.         const ar = '明月出天山苍茫云海间'.split('');
    
41.         const total = ar.length, half = Math.floor(ar.length / 2), ww = 700;
    
42.         let tbAr = [];
    
43.         ar.forEach((t,k) => {
    
44.                 let tbox = document.createElement('txt-box');
    
45.                 tbox.textContent = t;
    
46.                 tbox.style.cssText += `
    
47.                         --xx: ${ww / total * k + 40}px;
    
48.                         --delay: -${k <= half ? k * 0.5 : (total - k) * 0.5}s;
    
49.                 `;
    
50.                 mydiv.appendChild(tbox);
    
51.         });
    
52. })();
    
53. </script>

复制代码

红影

这个是边框围绕文字旋转了，而且能正转反转呢

红影

原来给它景深，并设置Y和Z的值有这样的效果

南无月

跳绳变成呼啦圈了。。

南无月

边框有金属的质感，挺好看，碰边即回。。

马黑黑

南无月 发表于 2024-6-7 18:06
边框有金属的质感，挺好看，碰边即回。。

这个是3d动画，不过由于没有背景衬托，也由于变化幅度小，不太容易感觉得到

马黑黑

红影 发表于 2024-6-7 16:25
原来给它景深，并设置Y和Z的值有这样的效果

3d转换

马黑黑

红影 发表于 2024-6-7 16:23
这个是边框围绕文字旋转了，而且能正转反转呢

马黑黑

南无月 发表于 2024-6-7 18:05
跳绳变成呼啦圈了。。

束腰训练，想从橄榄变豆芽

红影

马黑黑 发表于 2024-6-7 18:15
3d转换

嗯嗯，这个更高级了

红影

马黑黑 发表于 2024-6-7 18:15

没想到就是个文字外围也有这么多设置呢

马黑黑

红影 发表于 2024-6-7 19:43
没想到就是个文字外围也有这么多设置呢

马黑黑

红影 发表于 2024-6-7 19:42
嗯嗯，这个更高级了

一般一般

南无月

马黑黑 发表于 2024-6-7 18:16
束腰训练，想从橄榄变豆芽

老师心想就能贴成，事也能成

南无月

马黑黑 发表于 2024-6-7 18:10
这个是3d动画，不过由于没有背景衬托，也由于变化幅度小，不太容易感觉得到

好哒，等会拿代码去瞧一瞧老师说的。。

红影

马黑黑 发表于 2024-6-7 19:49

这个完全没想到。

红影

马黑黑 发表于 2024-6-7 19:49
一般一般

很奇妙呢

马黑黑

红影 发表于 2024-6-7 21:29
很奇妙呢

还好还好

马黑黑

红影 发表于 2024-6-7 21:27
这个完全没想到。

想想就能想到