增加的分享按紐不顯示

文強(qiáng)

代碼有點(diǎn)多，不妨參考一下我論壇的分享（位置和圖標(biāo)可以在css里自己調(diào)整）→ https://boonkiong.com/thread-3926-1-1.html

文強(qiáng)

我用的背景是動態(tài)壁紙來的，可以放在后臺\全局\SEO設(shè)置\其他\其他頭部信息，或是直接放到header模板里也可以。

1. <video src="https://boonkiong.com/video/A_long_Way.mp4"class="bjimg" autoplay="true" loop="true" muted="true"></video>

復(fù)制代碼

然后你需要在 template\default\common\common.css 里添加代碼。

1. .bjimg {
   
2. position: fixed;   
   
3. top: 0;
   
4. left: 0;
   
5. width: 100%;
   
6. height:100%;
   
7. overflow: hidden;
   
8. z-index: -10;
   
9. object-fit: cover;
   
10. }

復(fù)制代碼

文強(qiáng)

那個漸變字體需要在 template\default\common\common.css 里添加代碼

1. 
   
2.             #postmessage_37985{
   
3. font-size: 22px;
   
4.                 color: #8c888b;
   
5. background: -webkit-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff);
   
6.                 -moz-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff);
   
7.                 -ms-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff);
   
8.                 color: transparent;
   
9.                 -webkit-background-clip: text;
   
10.                 animation: ran 50s linear infinite;
    
11.             }
    
12.             @keyframes ran {
    
13.                 from {
    
14.                     backgroud-position: 0 0;
    
15.                 }
    
16.                 to {
    
17.                     background-position: 9000px 0;
    
18.                 }
    
19.             }

復(fù)制代碼

然后看你需要讓那些字體漸變，例如模板字體里的h1,然后添加代碼給h1運(yùn)行。

1. h1 {
   
2.     color: #8c888b;
   
3.     background: -webkit-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff);
   
4.     -moz-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff): ;
   
5.     -ms-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff): ;
   
6.     color: transparent;
   
7.     -webkit-background-clip: text;
   
8.     animation: ran 150s linear infinite;
   
9. }

復(fù)制代碼

ran 150s 是速度，自己調(diào)整。

文強(qiáng)

TaC 發(fā)表于 2023-4-23 21:59
先回復(fù)你這個分享代碼的測試結(jié)果。
我試了下，跟我的一樣，除了出現(xiàn)“分享到”這三個字以外，圖標(biāo)都不顯 ...

你要加入css代碼它才會顯示，因?yàn)閏ss代碼里帶有圖標(biāo)，你的代碼里只有js都沒圖標(biāo)它怎么顯示？

文強(qiáng)

TaC 發(fā)表于 2023-4-23 22:12
這一塊我看得不是很明白，CSS里添加代碼我倒是清楚，可讓哪些字體漸變，模板字體h1這些看得有點(diǎn)迷糊。
在 ...

h1大多數(shù)都是那些標(biāo)題，而且h1只是個舉例，你可以在需要的字體添加

1. [b1]漸變字體[/b1]

復(fù)制代碼

然后在css里添加

1. b1 {
   
2.     color: #8c888b;
   
3.     background: -webkit-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff);
   
4.     -moz-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff): ;
   
5.     -ms-linear-gradient(45deg,#00f2ff,#ff5200,#ffd300,#4000ff,#006bff): ;
   
6.     color: transparent;
   
7.     -webkit-background-clip: text;
   
8.     animation: ran 150s linear infinite;
   
9. }

復(fù)制代碼