用css實(shí)現(xiàn)的氣球動(dòng)態(tài)效果簡單好用，仿佛回到了童年

css實(shí)現(xiàn)的氣球動(dòng)態(tài)效果

在做活動(dòng)宣傳的時(shí)候，經(jīng)常想要實(shí)現(xiàn)一種像氣球一樣可愛的可以隨時(shí)向上和向下浮動(dòng)的動(dòng)態(tài)效果，以前那種網(wǎng)頁兩側(cè)對(duì)聯(lián)圖片已經(jīng)不太適合時(shí)代發(fā)展了。現(xiàn)在的網(wǎng)頁設(shè)計(jì)更注重移動(dòng)端的動(dòng)態(tài)效果體驗(yàn)。

今天我將帶領(lǐng)大家做一個(gè)可愛的動(dòng)態(tài)效果，效果演示請(qǐng)參照上面的動(dòng)畫圖片。

第一步您需要做個(gè)透明圖片（rightflag.png）保存到網(wǎng)站目錄里。

開始上代碼請(qǐng)將如下代碼放到頁面的css部分

<style>	
	.hot_right_quban{width:25%;max-width:130px;position:fixed;left:-130px;top:16%;z-index:999999;opacity:1;animation:swing 1s 1s ease both; transition:all 1s ease-in-out;opacity:0;}
	.hot_right_quban p{width:94%;display:inline-block;font-size:14px;color:#fff;background:rgb(14, 14, 14);text-align:center;border-radius:6%;padding:4% 0px;line-height:1.3em;margin:0 3%;}
	.hot_right_quban p span{background:#fc873f;display:inline-block;padding:0 5%;margin:0 4%;border-radius:28%;}
	.hot_right_quban img{width:100%;height:auto;}
	.hot_right_quban .hot_close_quban{display:block;width:21%;height:10%;position:absolute;right:0;top:0;z-index:1000000;}
	.hot_right_quban.animate{left:0; opacity:1; }
	.hot_hide{left:-130px !important; opacity:0 !important; }
	#hot_hide{left:-130px; opacity:0; }
	.hot_right_quban.animate1{animation:tops 40s infinite;} 
/*以下代碼實(shí)現(xiàn)像氣球一樣的動(dòng)態(tài)浮動(dòng)效果*/
@-webkit-keyframes tops{
	0%{top:16%;}
	50%{top:50%;}
	100%{top:16%;}
}
@-moz-keyframes tops{
	0%{top:16%;}
	50%{top:50%;}
	100%{top:16%;}
}
@-ms-keyframes tops{
	0%{top:16%;}
	50%{top:50%;}
	100%{top:16%;}
}
@-o-keyframes tops{
	0%{top:16%;}
	50%{top:50%;}
	100%{top:16%;}
}
</style>

請(qǐng)將如下代碼放到網(wǎng)站的js部分

<script>
function rightflag(){
var rightflag = false;
$("body").append("<div class='hot_right_quban'><a href=\"javascript：void(0)\" onClick=\"openChat('hd2019_right')\"><img src='rightflag.png'></a></div>");
dyfun = true;
if(dyfun){
function hot_start() {
$(".hot_right_quban").addClass('animate');
setTimeout(function() {$(".hot_right_quban").addClass('animate1');}, 3000);
}
$(".hot_right_quban").append('<span class="hot_close_quban"></span>');
$(".hot_close_quban").click(function() {
$(".hot_right_quban").attr('id', 'hot_hide');
$(".hot_right_quban").removeClass('animate1');
setTimeout(function() {$(".hot_right_quban").attr('id', '');}, 15000);
hot_start();
});
setTimeout(hot_start, 3000);
}
}
</script>
<script>rightflag();</script>

運(yùn)行這段代碼之前需要在網(wǎng)頁頭部引用jquery

上面的代碼可以實(shí)現(xiàn)像我的案例一樣的動(dòng)態(tài)效果了。

歡迎關(guān)注我，我是一個(gè)有16年網(wǎng)站開發(fā)經(jīng)驗(yàn)的網(wǎng)站設(shè)計(jì)師，歡迎關(guān)注我的頭條號(hào)前端技術(shù)分享，您有需要網(wǎng)站建設(shè)，網(wǎng)站維護(hù)相關(guān)的需求可以找我。

如果這篇文章可以幫助到您，請(qǐng)收藏和轉(zhuǎn)發(fā)。

勇衛(wèi)

吳勇衛(wèi)，江蘇省書法家協(xié)會(huì)會(huì)員，工藝美術(shù)師，作品參展2022中國書法年展楷書展，首屆江蘇中青年書法篆刻展優(yōu)秀獎(jiǎng)、拾草園書法社創(chuàng)始人。

快來為你心儀的作品打call！揚(yáng)子晚報(bào)第三屆“福娃”春聯(lián)大賽投票通道正式開啟https://wap.yzwb.net/wap/news/3424622.html

校對(duì) 陶善工

文章開篇，小圈先介紹下昆侖萬維公司旗下的AI大模型『天工』，它是由昆侖萬維自研的雙千億級(jí)大語言模型，也是國內(nèi)首個(gè)對(duì)標(biāo)ChatGPT的雙千億級(jí)大語言模型，可滿足文案創(chuàng)作、知識(shí)問答、代碼編程、邏輯推演、數(shù)理推算等需求。

早在今年上半年的時(shí)候，小圈還申請(qǐng)過天工的內(nèi)測試用資格。而當(dāng)時(shí)各種ChatGPT產(chǎn)品層出不窮，功能使用上也都前篇一律，所以也就試用過幾次沒在關(guān)注過了。

而現(xiàn)在天工支持平臺(tái)也擴(kuò)展了，支持了：網(wǎng)頁端、IOS端、Android端

前不久再次登錄官網(wǎng)時(shí)發(fā)現(xiàn)，官方已經(jīng)在GitHub上開源了 SkyChat、SkyPaint、SkyText、SkyCode 四款A(yù)I功能產(chǎn)品。一查之下，確定它們是基于百億級(jí)大語言模型“天工”Skywork-13B系列，并配套開源了600GB、150B Tokens的超大高質(zhì)量開源中文數(shù)據(jù)集。而且這些模型開發(fā)者不需要額外的申請(qǐng)，可以直接使用甚至商用。

今天主要分享一下四款開源產(chǎn)品的主要功能和應(yīng)用場景。

1、SkyChat

SkyChat 是一款基于中文GPT-3 API研發(fā)的聊天機(jī)器人項(xiàng)目。它可以像ChatGPT一樣，實(shí)現(xiàn)人機(jī)聊天、對(duì)話、你問我答，除此之外還能支持中英文互譯、對(duì)對(duì)聯(lián)、內(nèi)容續(xù)寫、寫古詩、生成菜譜、第三人稱轉(zhuǎn)述、創(chuàng)建采訪問題等多種功能。

項(xiàng)目地址：https://github.com/SkyWorkAIGC/SkyChat-Chinese-Chatbot-GPT3

官方也提供了相應(yīng)的API示例及文檔參考，以供開發(fā)者調(diào)用使用。

比如：生成菜譜API演示

效果展示：

Python版API - Demo（需注冊(cè)申請(qǐng)APIKey）：

2、SkyPaint

SkyPaint 是基于 Stable Diffusion 優(yōu)化的AI繪畫模型。支持輸入中英文文本，可生成多種現(xiàn)代藝術(shù)風(fēng)格的高質(zhì)量圖像。

項(xiàng)目地址：https://github.com/SkyWorkAIGC/SkyPaint-AI-Diffusion

機(jī)械狗：

宮崎駿動(dòng)畫-城堡-大海：

Python模型調(diào)用示例（模型下載在GitHub上）：

from diffusers import StableDiffusionPipeline

device = 'cuda'
pipe = StableDiffusionPipeline.from_pretrained("path_to_our_model").to(device)

prompts = [
    '機(jī)械狗',
    '城堡 大海 夕陽 宮崎駿動(dòng)畫',
    '花落知多少',
    '雞你太美',
]

for prompt in prompts:
    prompt = 'sai-v1 art, ' + prompt
    image = pipe(prompt).images[0]  
    image.save("%s.jpg" % prompt)

3、SkyText

SkyText 是由奇點(diǎn)智源（昆侖萬維收購的新企AI公司）發(fā)布的中文GPT3預(yù)訓(xùn)練大模型，可以進(jìn)行聊天、問答、中英互譯等不同的任務(wù)。應(yīng)用這個(gè)模型，除了可以實(shí)現(xiàn)基本的聊天、對(duì)話、你問我答外，還能支持中英文互譯、內(nèi)容續(xù)寫、對(duì)對(duì)聯(lián)、寫古詩、生成菜譜、第三人稱轉(zhuǎn)述、創(chuàng)建采訪問題等多種功能。(跟SkyChat很像)

項(xiàng)目地址：https://github.com/SkyWorkAIGC/SkyText-Chinese-GPT3

模型使用：

在線咨詢

上一篇：幾乎完美替代notepad++的五款文本編輯器(知道你需要)
下一篇：跨境電商賣家如何制作圖文并茂的HTML郵件，做好EDM營銷

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

用css實(shí)現(xiàn)的氣球動(dòng)態(tài)效果簡單好用，仿佛回到了童年

1、SkyChat

2、SkyPaint

3、SkyText

您的項(xiàng)目需求