《心情不错》TO千羽 （学习马黑黑字体效果）

千羽

这效果做的漂亮，摇摆的文字挺好看。表情做的按钮也很新颖，真好

千羽

这背景图也喜欢，歌儿选的好听，影子现在用黑黑老师的代码做帖是得心应手呢，

千羽

好喜欢啊，谢谢影子的美帖，我都想照着做一个了

千羽

红影 发表于 2022-3-13 22:48
@千羽 谢谢羽儿好礼，影子学个字体效果，回个小礼。希望你每一个天都心情好好

嗯，和影子一起天天好心情，开心玩图

千羽

马黑黑 发表于 2022-3-13 22:57
千羽收礼开森

谢谢黑黑老师

千羽

小九 发表于 2022-3-14 17:56
心情不错，羽儿收礼开心

小九晚上好，谢谢

千羽

大猫咪 发表于 2022-3-14 19:14
红影好制作，真棒，图片，色彩，歌曲都让人感觉很好， 看着舒服！ 厉害！

千羽小仙女收礼开心！

问好猫咪，谢谢

红影

加林森 发表于 2022-3-14 16:29
就是，我也去试一试制作一个出来玩玩。

好啊，等着看队长的制作

红影

马黑黑 发表于 2022-3-14 17:23
这是大猫咪的表情

才不是，原本就是论坛表情好不好

红影

小辣椒 发表于 2022-3-14 17:44
亲爱的，这个效果太棒了

黑黑的那个摆动字体，发现用来做帖子还挺有趣的

加林森

红影 发表于 2022-3-14 19:54
好啊，等着看队长的制作

我制作出来了。

红影

小辣椒 发表于 2022-3-14 17:45
晚上电脑上来继续欣赏

谢谢亲爱的，空了想多试几个字体效果，感觉那个集中营里的都好看呢

红影

小九 发表于 2022-3-14 17:56
心情不错，羽儿收礼开心

祝九儿也每天心情不错

红影

大猫咪 发表于 2022-3-14 19:14
红影好制作，真棒，图片，色彩，歌曲都让人感觉很好， 看着舒服！ 厉害！

千羽小仙女收礼开心！

偶尔听到这歌，觉得很轻松温暖，就用来做帖子了

红影

千羽 发表于 2022-3-14 19:29
高高兴兴来收礼啦

羽儿来了谢谢你的好礼

千羽

红影 发表于 2022-3-14 19:57
羽儿来了谢谢你的好礼

哈哈，影子，该说谢谢的是我厊

红影

千羽 发表于 2022-3-14 19:31
这效果做的漂亮，摇摆的文字挺好看。表情做的按钮也很新颖，真好

是啊，黑黑的那个摇摆字特别漂亮

红影

千羽 发表于 2022-3-14 19:35
这背景图也喜欢，歌儿选的好听，影子现在用黑黑老师的代码做帖是得心应手呢，

没有啊，黑黑老师那里太多好东西了，影子没本事都做出来啊

红影

千羽 发表于 2022-3-14 19:37
好喜欢啊，谢谢影子的美帖，我都想照着做一个了

好啊，我去把这个帖子的代码贴出来

1. <style tpye="text/css">
   
2.      #xq { position: relative; left:-204px;top:120px; width: 1024px; height: 684px; background:#333 url('https://pic.imgdb.cn/item/622dc0cf5baa1a80ab43cd0d.jpg') no-repeat center/cover; box-shadow: 4px 4px 5px #888;border-radius:12px;  }
   
3. body { overflow-x: hidden; } /*禁用横向滚动条 */
   
4. #baiBox {
   
5.         margin: auto;
   
6.         width: 360px;
   
7.         text-align: center;
   
8.         font-size: 5rem;
   
9.         font-weight: bold;
   
10.         color: #EEEE00;
    
11.         transform-origin: top;
    
12.         animation: yao 0.8s linear infinite alternate;
    
13. }
    
14. 
    
15. @keyframes yao {
    
16.         from{  transform: perspective(800px) rotatex(30deg); }
    
17.         to { transform: perspective(800px) rotatex(-30deg); }
    
18. }
    
19. .picBtn {
    
20.      
    
21.         width: 120px;
    
22.         height: 120px;
    
23.         border: none;
    
24.         outline: none;
    
25.         border-radius: 8px;
    
26.         background: transparent url('https://pic.imgdb.cn/item/622db6215baa1a80ab3dff55.gif') no-repeat;
    
27.         cursor: pointer;
    
28. </style>
    
29. <div id="xq" >
    
30. <div id="baiBox" style="position: absolute; left:120px; top: 40px; ">心情不错</div>
    
31. 
    
32. <div style="position: absolute; left:120px; top: 150px; width:400px;text-align:center;">
    
33.         <img alt="" src="http://image.hnol.net/c/2021-01/10/10/202101101019478794-5088534.gif"/>
    
34. 
    
35. 
    
36.         <div style="position:absolute; width:160px; left:560px; top: 60px; text-align:center;">
    
37. 
    
38. <center >
    
39. <p ><font color="#ffffff" size="4" >
    
40. 
    
41.      <div style="color:#ffffff;margin:0px;padding:10px;font-size:5px;font-family:微软雅黑;text-shadow:1px 1px 1px #000000;">
    
42. 
    
43.               <marquee  scrollamount="5" direction="left" >把一首轻松的歌儿送给羽儿，感谢你的好礼，祝福每一天《心情不错》 </marquee>
    
44.                 <p><audio id="music" src="http://www.kumeiwp.com/sub/filestores/2022/03/13/f088571586e027f5d98fc83817dd9f53.mp3" loop="loop" autoplay="autoplay" ></audio><br></p>
    
45.             <div style="position:absolute; width:120px; left:110px; top: 250px; text-align:center;">
    
46. 
    
47.                 <button id="picBtn" class="picBtn"></button>
    
48.             </div>
    
49.       </div>
    
50. </div>
    
51. </div>
    
52. </div>
    
53. 
    
54. <script language="javascript">
    
55. 
    
56. var mu = document.getElementById('music');
    
57. var btn = document.getElementById('picBtn');
    
58. 
    
59. btn.onclick = function(){
    
60.         mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/622db6215baa1a80ab3dff55.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')");
    
61. }
    
62. 
    
63. mu.addEventListener("ended", function(){
    
64.         btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')";
    
65. })
    
66. 
    
67. </script></div>
    
68. <br><br><br><br><br><br><br><br>

复制代码

红影

千羽 发表于 2022-3-14 19:40
嗯，和影子一起天天好心情，开心玩图

嗯嗯，我们每天好心情