關(guān)注本頭條號(hào),每天堅(jiān)持更新原創(chuàng)干貨技術(shù)文章。
如需學(xué)習(xí)視頻,請(qǐng)?jiān)谖⑿潘阉鞴娞?hào)“智傳網(wǎng)優(yōu)”直接開始自助視頻學(xué)習(xí)
本文主要講解如何把無(wú)圖形界面(即純命令界面)的Ubuntu Server從英文語(yǔ)言環(huán)境切換到中文環(huán)境。
如何Ubuntu Server從英文語(yǔ)言環(huán)境切換到中文環(huán)境
如果你在安裝Ubuntu Server版時(shí),不小心選擇了英文環(huán)境,想切換到中文環(huán)境,那么本文適合您。本文以Ubuntu 20.04 Server版為例做演示。
最終成果:
把Ubuntu Server版系統(tǒng)從英文環(huán)境切換到中文環(huán)境。
把Ubuntu Server版系統(tǒng)從英文環(huán)境切換到中文環(huán)境
部署前提條件:
組件介紹:
先看看下面這張圖:
你會(huì)發(fā)現(xiàn),Ubuntu系統(tǒng)輸出的信息都是英文的。
當(dāng)前Ubuntu為英文語(yǔ)言環(huán)境
先安裝相關(guān)組件:
sudo apt install -y language-pack-zh-hans
設(shè)置語(yǔ)言環(huán)境
這個(gè)組件包括的文件共2個(gè)。
language-pack-zh-hans: /usr/share/doc/language-pack-zh-hans/changelog.gz
language-pack-zh-hans: /usr/share/doc/language-pack-zh-hans/copyright
sudo vim /etc/default/locale
修改為以下內(nèi)容
LANG="zh_CN.UTF-8"
LANGUAGE="zh_CN:zh"
正在把Ubuntu Server從英文語(yǔ)言環(huán)境切換到中文環(huán)境
然后重啟服務(wù)器即可。
如果您在服務(wù)器上安裝了圖形化界面,還需要執(zhí)行以下命令安裝字體和輸入法。
sudo apt install $(check-language-support) -y
上的命令將會(huì)安裝以下組件:
fcitx fcitx-frontend-gtk2 fcitx-frontend-gtk3 fcitx-frontend-qt5 fcitx-module-cloudpinyin fcitx-pinyin fcitx-sunpinyin fcitx-table-wubi fcitx-ui-classic fcitx-ui-qimpanel fonts-arphic-ukai fonts-arphic-uming fonts-noto-cjk fonts-noto-cjk-extra
您會(huì)發(fā)現(xiàn),它主要是安裝fcitx輸入法和中文字體。如果你的服務(wù)器沒(méi)有安裝圖形化界面,沒(méi)有必要安裝這些。
執(zhí)行以下命令檢查系統(tǒng)更新:
sudo apt update
測(cè)試是否已經(jīng)成功把Ubuntu Server從英文語(yǔ)言環(huán)境切換到中文環(huán)境
你會(huì)發(fā)現(xiàn),現(xiàn)在Ubuntu輸出的信息已經(jīng)是中文了。我們已經(jīng)成功把Ubuntu 20.04 Server版的英文環(huán)境切換到了中文環(huán)境。
通過(guò)本文,您應(yīng)該可以學(xué)習(xí)到,如何把Ubuntu 20.04 Server版從英文語(yǔ)言環(huán)境切換到中文環(huán)境了吧?其實(shí)很簡(jiǎn)單,通過(guò)本文編輯器修改/etc/default/locale配置文件即可。Locale是根據(jù)計(jì)算機(jī)用戶所使用的語(yǔ)言,所在國(guó)家或者地區(qū),以及當(dāng)?shù)氐奈幕瘋鹘y(tǒng)所定義的一個(gè)軟件運(yùn)行時(shí)的語(yǔ)言環(huán)境。如果您有更好的辦法,請(qǐng)留言。
本文已同步至博客站,尊重原創(chuàng),轉(zhuǎn)載時(shí)請(qǐng)?jiān)谡闹懈綆б韵骆溄樱?br>https://www.linuxrumen.com/rmxx/1859.html
點(diǎn)擊了解更多,快速查看更多的技術(shù)文章列表。
要使用的是wkhtmltopdf的Python封裝——pdfkit
安裝
1. Install python-pdfkit:
$ pip install pdfkit
2. Install wkhtmltopdf:
$ sudo apt-get install wkhtmltopdf
sudo yum intsall wkhtmltopdf
brew install Caskroom/cask/wkhtmltopdf
使用
一個(gè)簡(jiǎn)單的例子:
import pdfkit
pdfkit.from_url('http://google.com', 'out.pdf')
pdfkit.from_file('test.html', 'out.pdf')
pdfkit.from_string('Hello!', 'out.pdf')
你也可以傳遞一個(gè)url或者文件名列表:
pdfkit.from_url(['google.com', 'yandex.ru', 'engadget.com'], 'out.pdf')
pdfkit.from_file(['file1.html', 'file2.html'], 'out.pdf')
也可以傳遞一個(gè)打開的文件:
with open('file.html') as f:
pdfkit.from_file(f, 'out.pdf')
如果你想對(duì)生成的PDF作進(jìn)一步處理, 你可以將其讀取到一個(gè)變量中:
# 設(shè)置輸出文件為False,將結(jié)果賦給一個(gè)變量
pdf=pdfkit.from_url('http://google.com', False)
你可以制定所有的 wkhtmltopdf 選項(xiàng) http://wkhtmltopdf.org/usage/wkhtmltopdf.txt. 你可以移除選項(xiàng)名字前面的 '--' .如果選項(xiàng)沒(méi)有值, 使用None, False or * 作為字典值:
options={
'page-size': 'Letter',
'margin-top': '0.75in',
'margin-right': '0.75in',
'margin-bottom': '0.75in',
'margin-left': '0.75in',
'encoding': "UTF-8",
'no-outline': None
}
pdfkit.from_url('http://google.com', 'out.pdf', options=options)
默認(rèn)情況下, PDFKit 將會(huì)顯示所有的 wkhtmltopdf 輸出. 如果你不想看到這些信息,你需要傳遞一個(gè) quiet 選項(xiàng):
options={
'quiet': ''
}
pdfkit.from_url('google.com', 'out.pdf', options=options)
由于wkhtmltopdf的命令語(yǔ)法 , TOC 和 Cover 選項(xiàng)必須分開指定:
toc={
'xsl-style-sheet': 'toc.xsl'
}
cover='cover.html'
pdfkit.from_file('file.html', options=options, toc=toc, cover=cover)
當(dāng)你轉(zhuǎn)換文件、或字符串的時(shí)候,你可以通過(guò)css選項(xiàng)指定擴(kuò)展的 CSS 文件。
# 單個(gè) CSS 文件
css='example.css'
pdfkit.from_file('file.html', options=options, css=css)
# Multiple CSS files
css=['example.css', 'example2.css']
pdfkit.from_file('file.html', options=options, css=css)
你也可以通過(guò)你的HTML中的meta tags傳遞任意選項(xiàng):
body="""
<html>
<head>
<meta name="pdfkit-page-size" content="Legal"/>
<meta name="pdfkit-orientation" content="Landscape"/>
</head>
Hello World!
</html>
"""
pdfkit.from_string(body, 'out.pdf') #with --page-size=Legal and --orientation=Landscape
配置
每個(gè)API調(diào)用都有一個(gè)可選的參數(shù)。這應(yīng)該是pdfkit.configuration()API 調(diào)用的一個(gè)實(shí)例. 采用configuration 選項(xiàng)作為初始化參數(shù)。可用的選項(xiàng)有:
示例 :針對(duì)wkhtmltopdf不在系統(tǒng)路徑中(不在$PATH里面)
PATH里面):
config=pdfkit.configuration(wkhtmltopdf='/opt/bin/wkhtmltopdf'))
pdfkit.from_string(html_string, output_file, configuration=config)
問(wèn)題
IOError:'No wkhtmltopdf executable found':
確保 wkhtmltopdf 在你的系統(tǒng)路徑中(PATH), 會(huì)通過(guò) configuration進(jìn)行了配置 (詳情看上文描述)。 在Windows系統(tǒng)中使用where wkhtmltopdf命令 或 在 linux系統(tǒng)中使用 which wkhtmltopdf 會(huì)返回 wkhtmltopdf二進(jìn)制可執(zhí)行文件所在的確切位置.
如果出現(xiàn)這個(gè)錯(cuò)誤意味著 PDFKit不能處理一個(gè)輸入。你可以嘗試直接在錯(cuò)誤信息后面直接運(yùn)行一個(gè)命令來(lái)查看是什么導(dǎo)致了這個(gè)錯(cuò)誤 (某些版本的 wkhtmltopdf會(huì)因?yàn)槎五e(cuò)誤導(dǎo)致處理失敗)
確保兩項(xiàng):
1)、你的系統(tǒng)中有中文字體
2)、在html中加入
下面是我隨便寫的一個(gè)HTML表格:
<html>
<head><meta charset="UTF-8"></head>
<body>
<table width="400" border="1">
<tr>
<th align="left">Item....</th>
<th align="right">1</th>
</tr>
<tr>
<td align="left">衣服</td>
<td align="right">1.10</td>
</tr>
<tr>
<td align="left">化妝品</td>
<td align="right">.00</td>
</tr>
<tr>
<td align="left">食物</td>
<td align="right">0.40</td>
</tr>
<tr>
<th align="left">tOTAL</th>
<th align="right">01.50</th>
</tr>
</table>
</body>
</html>
下面是生成的PDF截圖
S和css實(shí)現(xiàn),這是部分代碼
注:這是一個(gè)3D場(chǎng)景,在PC端的話還可以按住鼠標(biāo)左鍵并拖動(dòng)鼠標(biāo),來(lái)從各個(gè)視角觀察它。
降低作品檔次的效果圖:
寓意解釋:
通過(guò)JS和CSS3組合實(shí)現(xiàn)的 碎片飄零效果。每個(gè)碎片都由一句情話組成,無(wú)數(shù)的情話碎片構(gòu)成了心型。在【情歌】伴隨下,當(dāng)所有【情話】碎片飛開后,便出現(xiàn)了更高的感情表達(dá)——【情畫】。
當(dāng)兩個(gè)人的情感不再需要用言語(yǔ)——情話來(lái)表達(dá)時(shí)(即當(dāng)所有【情話】碎片飛開后),就出現(xiàn)了更高的感情境界——情畫。)
HTML代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>#三行情書#</title>
<link rel="shortcut icon" href="./logo.ico" type="image/x-icon" />
<link type="text/css" rel="stylesheet" href='http://fonts.googleapis.com/css?family=Ubuntu:300italic,300,700' />
<link rel="stylesheet" type="text/css" href="./css/main.css">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<audio autoplay="autopaly">
<source src="song.mp3" type="audio/mp3" />
</audio>
<div class="poem">
夢(mèng)隨風(fēng)醉纏綿<br>
情如繭凝成緣<br>
百花牽衣吐艷
</div>
<div class="mosaica">計(jì)科1502 白XX<a href="index.html">上一頁(yè)</a></div>
<div class="container">
<div id="plane1" class="plane">
<div class="items">
<!-- 第一行 -->
<div class="item" style="top: 0px; left: 0px; width: 100px; height: 87.5px; animation-delay: 8.64s;background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item" style="top: 0px; left: 100px; width: 100px; height: 87.5px; animation-delay: 8.56s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item3" style="top: 0px; left: 200px; width: 100px; height: 87.5px; animation-delay: 14.96s; background: url('./img/12.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item" style="top: 0px; left: 300px; width: 100px; height: 87.5px; animation-delay: 9.74s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item" style="top: 0px; left: 400px; width: 100px; height: 87.5px; animation-delay: 8.28s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item" style="top: 0px; left: 500px; width: 100px; height: 87.5px;animation-delay: 8.88s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item" style="top: 0px; left: 600px; width: 100px; height: 87.5px;animation-delay: 14.96s; background: url('./img/12.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item" style="top: 0px; left: 700px; width: 100px; height: 87.5px; animation-delay: 9.76s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item" style="top: 0px; left: 800px; width: 100px; height: 87.5px; animation-delay: 8.4s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item2" style="top: 0px; left: 200px; width: 100px; height: 87.5px; animation-delay: 1.64s; font-size: 25px;">風(fēng)</div>
<div class="item2" style="top: 0px; left: 600px; width: 100px; height: 87.5px; animation-delay: 2.44s; font-size: 25px;">情</div>
<!-- 第二行 -->
<div class="item" style="top: 87.5px; left: 0px; width: 100px; height: 87.5px; animation-delay: 8.12s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item" style="top: 87.5px; left: 100px; width: 100px; height: 87.5px; animation-delay: 14.96s; background: url('./img/12.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item3" style="top: 87.5px; left: 200px; width: 100px;height: 87.5px;animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item" style="top: 87.5px; left: 300px; width: 100px; height: 87.5px; animation-delay: 14.96s; background: url('./img/12.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item" style="top: 87.5px; left: 400px; width: 100px; height: 87.5px; animation-delay: 8.8s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item" style="top: 87.5px; left: 500px; width: 100px; height: 87.5px; animation-delay: 14.96s; background: url('./img/12.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item3" style="top: 87.5px; left: 600px; width: 100px;height: 87.5px;animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item" style="top: 87.5px; left: 700px; width: 100px;height: 87.5px;animation-delay: 14.96s; background: url('./img/12.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item" style="top: 87.5px; left: 800px; width: 100px; height: 87.5px; animation-delay: 9.48s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item2" style="top: 87.5px; left: 100px; width: 100px; height: 87.5px; animation-delay: 1.24s;font-size: 25px;">隨</div>
<div class="item2" style="top: 87.5px; left: 300px; width: 100px; height: 87.5px; animation-delay: 1.84s;font-size: 25px;">醉</div>
<div class="item2" style="top: 87.5px; left: 500px; width: 100px; height: 87.5px; animation-delay: 2.24s;font-size: 25px;">綿</div>
<div class="item2" style="top: 87.5px; left: 700px; width: 100px;height: 87.5px;animation-delay: 2.64s; font-size: 25px;">如</div>
<!-- 第三行 -->
<div class="item" style="top: 175px; left: 0px; width: 100px; height: 87.5px; animation-delay: 14.96s; background: url('./img/12.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item3" style="top: 175px; left: 100px; width: 100px; height: 87.5px; animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item3" style="top: 175px; left: 200px; width: 100px; height: 87.5px; animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item3" style="top: 175px; left: 300px; width: 100px; height: 87.5px; animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 175px; left: 400px; width: 100px; height: 87.5px; animation-delay: 14.96s; background: url('./img/12.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item3" style="top: 175px; left: 500px; width: 100px; height: 87.5px;animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item3" style="top: 175px; left: 600px; width: 100px; height: 87.5px;animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item3" style="top: 175px; left: 700px; width: 100px; height: 87.5px; animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item" style="top: 175px; left: 800px; width: 100px; height: 87.5px; animation-delay: 14.96s; background: url('./img/12.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item2" style="top: 175px; left: 0px; width: 100px; height: 87.5px; animation-delay: 1.04s;font-size: 25px;">夢(mèng)</div>
<div class="item2" style="top: 175px; left: 400px; width: 100px; height: 87.5px; animation-delay: 2.04s;font-size: 25px;">纏 </div>
<div class="item2" style="top: 175px; left: 800px; width: 100px; height: 87.5px; animation-delay: 2.84s;font-size: 25px;">繭 </div>
<!-- 第四行 -->
<div class="item" style="top: 262.5px; left: 0px; width: 100px; height: 87.5px; animation-delay: 14.96s; background: url('./img/12.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item3" style="top: 262.5px; left: 100px; width: 100px; height: 87.5px; animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item3" style="top: 262.5px; left: 200px; width: 100px;height: 87.5px;animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item3" style="top: 262.5px; left: 300px; width: 100px; height: 87.5px; animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item3" style="top: 262.5px; left: 400px; width: 100px; height: 87.5px; animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item3" style="top: 262.5px; left: 500px; width: 100px; height: 87.5px; animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item3" style="top: 262.5px; left: 600px; width: 100px;height: 87.5px;animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item3" style="top: 262.5px; left: 700px; width: 100px;height: 87.5px;animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 262.5px; left: 800px; width: 100px; height: 87.5px; animation-delay: 14.96s; background: url('./img/12.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item2" style="top: 262.5px; left: 0px; width: 100px; height: 87.5px; animation-delay: 4.64s;font-size: 25px;">艷</div>
<div class="item2" style="top: 262.5px; left: 800px; width: 100px; height: 87.5px; animation-delay: 3.04s;font-size: 25px;"> 凝</div>
<!-- 第五行 -->
<div class="item" style="top: 350px; left: 0px; width: 100px; height: 87.5px; animation-delay: 8.04s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item" style="top: 350px; left: 100px; width: 100px; height: 87.5px; animation-delay: 14.96s; background: url('./img/12.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item3" style="top: 350px; left: 200px; width: 100px; height: 87.5px; animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item3" style="top: 350px; left: 300px; width: 100px; height: 87.5px; animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item3" style="top: 350px; left: 400px; width: 100px; height: 87.5px; animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item3" style="top: 350px; left: 500px; width: 100px; height: 87.5px;animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item3" style="top: 350px; left: 600px; width: 100px; height: 87.5px;animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 350px; left: 700px; width: 100px; height: 87.5px; animation-delay: 14.96s; background: url('./img/12.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item" style="top: 350px; left: 800px; width: 100px; height: 87.5px; animation-delay: 8.4s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item2" style="top: 350px; left: 100px; width: 100px; height: 87.5px; animation-delay: 4.44s; font-size: 25px;">吐</div>
<div class="item3" style="top: 350px; left: 300px; width: 100px; height: 87.5px; animation-delay: 5.64s; background:none; "> I</div>
<div class="item3" style="top: 350px; left: 400px; width: 100px; height: 87.5px; animation-delay: 5.64s; background:none; "> L</div>
<div class="item3" style="top: 350px; left: 500px; width: 100px; height: 87.5px; animation-delay: 5.64s; background:none; "> U</div>
<div class="item2" style="top: 350px; left: 700px; width: 100px; height: 87.5px; animation-delay: 3.24s; font-size: 25px;">成</div>
<!-- 第六行 -->
<div class="item" style="top: 437.5px; left: 0px; width: 100px; height: 87.5px; animation-delay: 9.68s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 437.5px; left: 100px; width: 100px; height: 87.5px; animation-delay: 8.01s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 437.5px; left: 200px; width: 100px;height: 87.5px;animation-delay: 14.96s; background: url('./img/12.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item3" style="top: 437.5px; left: 300px; width: 100px; height: 87.5px; animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item3" style="top: 437.5px; left: 400px; width: 100px; height: 87.5px; animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item3" style="top: 437.5px; left: 500px; width: 100px; height: 87.5px; animation-delay: 15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 437.5px; left: 600px; width: 100px;height: 87.5px;animation-delay: 14.96s; background: url('./img/12.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 437.5px; left: 700px; width: 100px;height: 87.5px;animation-delay: 8.29s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 437.5px; left: 800px; width: 100px; height: 87.5px; animation-delay: 9.2s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item2" style="top: 437.5px; left: 200px; width: 100px; height: 87.5px; animation-delay: 4.24s;font-size: 25px;"> 衣</div>
<div class="item2" style="top: 437.5px; left: 600px; width: 100px; height: 87.5px;animation-delay: 3.44s; font-size: 25px;"> 緣</div>
<!-- 第七行 -->
<div class="item" style="top: 525px; left: 0px; width: 100px; height: 87.5px; animation-delay: 8.98s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 525px; left: 100px; width: 100px; height: 87.5px; animation-delay: 9.15s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 525px; left: 200px; width: 100px;height: 87.5px;animation-delay: 8.78s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 525px; left: 300px; width: 100px; height: 87.5px; animation-delay: 14.96s; background: url('./img/12.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item3" style="top: 525px; left: 400px; width: 100px; height: 87.5px; animation-delay:15.96s; background: url('./img/100.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 525px; left: 500px; width: 100px; height: 87.5px; animation-delay: 14.96s; background: url('./img/12.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 525px; left: 600px; width: 100px;height: 87.5px;animation-delay: 8.12s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 525px; left: 700px; width: 100px;height: 87.5px;animation-delay: 8.68s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 525px; left: 800px; width: 100px; height: 87.5px; animation-delay: 8.97s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item2" style="top: 525px; left: 300px; width: 100px; height: 87.5px; animation-delay: 4.04s;font-size: 25px;"> 牽</div>
<div class="item2" style="top: 525px; left: 500px; width: 100px; height: 87.5px;animation-delay: 3.64s; font-size: 25px;"> 百</div>
<!-- 第八行 -->
<div class="item" style="top: 612.5px; left: 0px; width: 100px; height: 87.5px; animation-delay: 8.89s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 612.5px; left: 100px; width: 100px; height: 87.5px; animation-delay: 8.87s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 612.5px; left: 200px; width: 100px;height: 87.5px;animation-delay: 8.99s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 612.5px; left: 300px; width: 100px; height: 87.5px; animation-delay: 8.25s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item" style="top: 612.5px; left: 400px; width: 100px; height: 87.5px; animation-delay:14.96s; background: url('./img/12.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 612.5px; left: 500px; width: 100px; height: 87.5px; animation-delay: 8.97s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 612.5px; left: 600px; width: 100px;height: 87.5px;animation-delay: 8.9s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 612.5px; left: 700px; width: 100px;height: 87.5px;animation-delay: 9s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"> </div>
<div class="item" style="top: 612.5px; left: 800px; width: 100px; height: 87.5px; animation-delay: 8.5s; background: url('./img/13.jpg') no-repeat; background-size: 100% 87.5px;"></div>
<div class="item2" style="top: 612.5px; left: 400px; width: 100px; height: 87.5px; animation-delay: 3.84s;font-size: 25px;">花 </div>
</div>
</div>
</div>
</body>
</html>
css代碼
* {
box-sizing: border-box;
}
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。