HTML5企業級求職必備3D螺旋，旋轉，球形特效具體解析文章

TML5企業級求職必備3D螺旋，旋轉，球形特效具體解析文章

知識點

HTML5，javascript，jquery，html，css，css3,主要由jquery來處理特效問題。

具體特效
1.3D多層平鋪特效，可鼠標滾輪拉進拉遠，鼠標左鍵點擊拖拽

2.平鋪點擊變球形，可鼠標拖拽旋轉，拉近拉遠，

請點擊此處輸入圖片描

3.球形變螺旋特效

4.螺旋變平鋪特效

每個小方格點擊進去都可以打開為一種企業常用的特效。左下角切換為多種特效。

由于圖片大小的限制，所以圖片解析的不是非常詳細，如果需要本課程教程視頻的伙伴請點擊關注，已經連載到11集，基本每日更新！

是一個純粹利用CSS所做出來的效果，這個效果說穿了就是一個圖像處理的原理，做法跟Photoshop里頭的幾乎一模一樣，只是一個用圖層和色版來制作，一個則是用CSS（把div當成圖層思考就好了）。

從PhotoShop開始

一開始我們來玩Photoshop，會比直接寫CSS來得容易理解（沒有Photoshop的人也沒關系，看完說明也就懂了），首先我們新增兩個圖層，一個里頭放上紅色的小球，另外一個里頭放上黑色的大球。

接著我們使用高斯模糊的濾鏡，分別把小紅球和大黑球模糊。

再來我們新增一個“亮度與對比”的調整圖層，勾選使用舊版，然后把對比數值往上拉，你就會看到神奇的現象。

拉到邊緣不再模糊之后，你就可以用鼠標嘗試著把紅球移動，就會發現紅球與黑球交界的地方變成粘粘的效果心，這就是我們要做的效果！

就這樣，你已經知道如何用Photoshop來制作，同理，CSS也是用同樣的方法，只是把圖層換成了div而已，就這么簡單。

CSS效果

首先我在HTML里頭，放上一個class為redball的div當作紅球，class為blackball的是黑球，這就是剛剛在PhotoShop里頭的兩個圖層，接著在最外圍放上一個class為effect的div，這就是我們的調整圖層，完成后HTML代碼的長相應該是這樣：

<div class="effect">
 <div class="blackball"></div>
 <div class="redball"></div>
</div>

只要對blackball和redball加入模糊的濾鏡，對effect加入對比的濾鏡，就能夠達到Photoshop里面的特效，而模糊的濾鏡必須使用filter:blur（數值），對比則使用filter:contrast（數值）。

CSS的長相會長這樣：

.effect{
 width:100%;
 height:100%;
 padding-top:50px;
 filter:contrast(10);
 background:#fff;
}
.blackball{
 width:100px;
 height:100px;
 background:black;
 padding:10px;
 border-radius:50%;
 margin:0 auto;
 z-index:1;
 filter:blur(5px);
}
.redball{
 width:60px;
 height:60px;
 background:#f00;
 padding:10px;
 border-radius:50%;
 position:absolute;
 top:70px;
 left:50px;
 z-index:2;
 filter:blur(5px) ;
 animation:rball 6s infinite;
}

忽略CSS里頭那些定位數值，里頭blur的數值設為5px，contrast的數值設為10，就可以看到紅求黑球粘在一起了，至于該怎么讓他們動起來呢？就要使用CSS3的animation，animation的程序如下：

@keyframes rball{
 0%,100%{
 left:35px;
 width:60px;
 height:60px;
 }
 4%,54%{
 width:60px;
 height:60px;
 }
 10%,60%{
 width:50px;
 height:70px;
 }
 20%,70%{
 width:60px;
 height:60px;
 }
 34%,90%{
 width:70px;
 height:50px;
 }
 41%{
 width:60px;
 height:60px;
 }
 50%{
 left:calc(100% - 95px);
 width:60px;
 height:60px;
 }
}

這里的keyframe寫了很多，因為要讓紅球進入黑球時，水平方向會被壓縮一下，然后再離開黑球的時候，水平方向會被拉長，如此一來才會更像有粘性的感覺，為了測試這個效果，可真是煞費我的苦心呀！（不過這里有個要注意的地方，由于位置上會自動去計算，所以要測試的話，最外層的effect寬度記得設為320px）

完成紅球之后，要讓兩顆藍色球合在一起再分開，也是同樣的原理，下方列出兩顆藍色球的CSS，比較需要注意的地方是我讓藍色球合體之后會變大一些，分開的時候也會拉長。

.blueball1{
 width:80px;
 height:80px;
 background:#00f;
 padding:10px;
 border-radius:50%;
 position:absolute;
 top:230px;
 left:0;
 z-index:2;
 filter:blur(8px) ;
 animation:bball1 6s infinite;
}
.blueball2{
 width:80px;
 height:80px;
 background:#00f;
 padding:10px;
 border-radius:50%;
 position:absolute;
 top:230px;
 left:240px;
 z-index:2;
 filter:blur(8px) ;
 animation:bball2 6s infinite;
}
@keyframes bball1{
 0%,100%{
 left:0;
 top:230px;
 width:80px;
 height:80px;
 }
 20%{
 top:230px;
 width:80px;
 height:80px;
 }
 85%{
 top:230px;
 left:75px;
 width:90px;
 height:70px;
 }
 90%{
 top:228px;
 width:75px;
 height:85px;
 }
 50%{
 top:215px;
 left:110px;
 width:110px;
 height:110px;
 }
}
@keyframes bball2{
 0%,100%{
 left:240px;
 top:230px;
 width:80px;
 height:80px;
 }
 20%{
 top:230px;
 width:80px;
 height:80px;
 }
 85%{
 top:230px;
 left:165px;
 width:90px;
 height:70px;
 }
 90%{
 top:228px;
 width:75px;
 height:85px;
 }
 50%{
 left:110px;
 top:215px;
 width:110px;
 height:110px;
 }
}

就這樣，單純利用CSS就完成了一個粘粘的效果.

次為大家介紹了如果用 Python 抓取公號文章并保存成 PDF 文件存儲到本地。但用這種方式下載的 PDF 只有文字沒有圖片，所以只適用于沒有圖片或圖片不重要的公眾號，那如果我想要圖片和文字下載下來怎么辦？今天就給大家介紹另一種方案——HTML。

需解決的問題

其實我們要解決的有兩個問題：

公眾號里的圖片沒有保存到 PDF 文件里。
公眾號里的一些代碼片段，尤其那些單行代碼比較長的，保存成 PDF 會出現代碼不全的問題。
PDF 會自動分頁，如果是代碼或圖片就會出現一些問題。

綜上問題，我覺得還是把公眾號下載成網頁 HTML 格式最好看，下面就介紹下如何實現。

功能實現

獲取文章鏈接的方式，和上一篇下載成 PDF 的文章一樣，依然是通過公眾號平臺的圖文素材里超鏈接查詢實現，在這里我們直接拿來上一期的代碼，進行修改即可。首先將原來文件 gzh_download.py 復制成 gzh_download_html.py，然后在此基礎進行代碼改造：

# gzh_download_html.py
# 引入模塊
import requests
import json
import re
import time
from bs4 import BeautifulSoup
import os

# 打開 cookie.txt
with open("cookie.txt", "r") as file:
    cookie = file.read()
cookies = json.loads(cookie)
url = "https://mp.weixin.qq.com"
#請求公號平臺
response = requests.get(url, cookies=cookies)
# 從url中獲取token
token = re.findall(r'token=(\d+)', str(response.url))[0]
# 設置請求訪問頭信息
headers = {
    "Referer": "https://mp.weixin.qq.com/cgi-bin/appmsg?t=media/appmsg_edit_v2&action=edit&isNew=1&type=10&token=" + token + "&lang=zh_CN",
    "Host": "mp.weixin.qq.com",
    "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36",
}

# 循環遍歷前10頁的文章
for j in range(1, 10, 1):
    begin = (j-1)*5
    # 請求當前頁獲取文章列表
    requestUrl = "https://mp.weixin.qq.com/cgi-bin/appmsg?action=list_ex&begin="+str(begin)+"&count=5&fakeid=MzU1NDk2MzQyNg==&type=9&query=&token=" + token + "&lang=zh_CN&f=json&ajax=1"
    search_response = requests.get(requestUrl, cookies=cookies, headers=headers)
    # 獲取到返回列表 Json 信息
    re_text = search_response.json()
    list = re_text.get("app_msg_list")
    # 遍歷當前頁的文章列表
    for i in list:
        # 目錄名為標題名，目錄下存放 html 和圖片
        dir_name = i["title"].replace(' ','')
        print("正在下載文章：" + dir_name)
        # 請求文章的 url ，獲取文章內容
        response = requests.get(i["link"], cookies=cookies, headers=headers)
        # 保存文章到本地
        save(response, dir_name, i["aid"])
        print(dir_name + "下載完成!")
    # 過快請求可能會被微信問候，這里進行10秒等待
    time.sleep(10)

好了，從上面代碼可以看出，主要就是將原來的方法 pdfkit.from_url(i["link"], i["title"] + ".pdf") 改成了現在的方式，需要用 requests 請求下文章的 URL ，然后再調用保存文章頁面和圖片到本地的方法，這里的 save() 方法通過以下代碼實現。

調用保存方法

#保存下載的 html 頁面和圖片
def save(search_response,html_dir,file_name):
    # 保存 html 的位置
    htmlDir = os.path.join(os.path.dirname(os.path.abspath(__file__)), html_dir)
    # 保存圖片的位置
    targetDir = os.path.join(os.path.dirname(os.path.abspath(__file__)),html_dir + '/images')
    # 不存在創建文件夾
    if not os.path.isdir(targetDir):
        os.makedirs(targetDir)
    domain = 'https://mp.weixin.qq.com/s'
    # 調用保存 html 方法
    save_html(search_response, htmlDir, file_name)
    # 調用保存圖片方法
    save_file_to_local(htmlDir, targetDir, search_response, domain)

# 保存圖片到本地
def save_file_to_local(htmlDir,targetDir,search_response,domain):
    # 使用lxml解析請求返回的頁面
    obj = BeautifulSoup(save_html(search_response,htmlDir,file_name).content, 'lxml')  
    # 找到有 img 標簽的內容
    imgs = obj.find_all('img')
    # 將頁面上圖片的鏈接加入list
    urls = []
    for img in imgs:
        if 'data-src' in str(img):
            urls.append(img['data-src'])
        elif 'src=""' in str(img):
            pass
        elif "src" not in str(img):
            pass
        else:
            urls.append(img['src'])

    # 遍歷所有圖片鏈接，將圖片保存到本地指定文件夾，圖片名字用0，1，2...
    i = 0
    for each_url in urls:
        # 跟據文章的圖片格式進行處理
        if each_url.startswith('//'):
            new_url = 'https:' + each_url
            r_pic = requests.get(new_url)
        elif each_url.startswith('/') and each_url.endswith('gif'):
            new_url = domain + each_url
            r_pic = requests.get(new_url)
        elif each_url.endswith('png') or each_url.endswith('jpg') or each_url.endswith('gif') or each_url.endswith('jpeg'):
            r_pic = requests.get(each_url)
        # 創建指定目錄
        t = os.path.join(targetDir, str(i) + '.jpeg')
        print('該文章共需處理' + str(len(urls)) + '張圖片，正在處理第' + str(i + 1) + '張……')
        # 指定絕對路徑
        fw = open(t, 'wb')
        # 保存圖片到本地指定目錄
        fw.write(r_pic.content)
        i += 1
        # 將舊的鏈接或相對鏈接修改為直接訪問本地圖片
        update_file(each_url, t, htmlDir)
        fw.close()

    # 保存 HTML 到本地
    def save_html(url_content,htmlDir,file_name):
        f = open(htmlDir+"/"+file_name+'.html', 'wb')
        # 寫入文件
        f.write(url_content.content)
        f.close()
        return url_content

    # 修改 HTML 文件,將圖片的路徑改為本地的路徑
    def update_file(old, new,htmlDir):
         # 打開兩個文件，原始文件用來讀，另一個文件將修改的內容寫入
        with open(htmlDir+"/"+file_name+'.html', encoding='utf-8') as f, open(htmlDir+"/"+file_name+'_bak.html', 'w', encoding='utf-8') as fw:
            # 遍歷每行，用replace()方法替換路徑
            for line in f:
                new_line = line.replace(old, new)
                new_line = new_line.replace("data-src", "src")
                 # 寫入新文件
                fw.write(new_line)
        # 執行完，刪除原始文件
        os.remove(htmlDir+"/"+file_name+'.html')
        time.sleep(5)
        # 修改新文件名為 html
        os.rename(htmlDir+"/"+file_name+'_bak.html', htmlDir+"/"+file_name+'.html')

好了，上面就是將文章頁面和圖片下載到本地的代碼，接下來我們運行命令 python gzh_download_html.py ，程序開始執行，打印日志如下：

$ python gzh_download_html.py
正在下載文章：學習Python看這一篇就夠了！
該文章共需處理3張圖片，正在處理第1張……
該文章共需處理3張圖片，正在處理第2張……
該文章共需處理3張圖片，正在處理第3張……
學習Python看這一篇就夠了！下載完成!
正在下載文章：PythonFlask數據可視化
該文章共需處理2張圖片，正在處理第1張……
該文章共需處理2張圖片，正在處理第2張……
PythonFlask數據可視化下載完成!
正在下載文章：教你用Python下載手機小視頻
該文章共需處理11張圖片，正在處理第1張……
該文章共需處理11張圖片，正在處理第2張……
該文章共需處理11張圖片，正在處理第3張……
該文章共需處理11張圖片，正在處理第4張……
該文章共需處理11張圖片，正在處理第5張……
該文章共需處理11張圖片，正在處理第6張……
該文章共需處理11張圖片，正在處理第7張……

現在我們去程序存放的目錄，就能看到以下都是以文章名稱命名的文件夾：

進入相應文章目錄，可以看到一個 html 文件和一個名為 images 的圖片目錄，我們雙擊打開擴展名為 html 的文件，就能看到帶圖片和代碼框的文章，和在公眾號看到的一樣。

總結

本文為大家介紹了如何通過 Python 將公號文章批量下載到本地，并保存為 HTML 和圖片，這樣就能實現文章的離線瀏覽了。當然如果你想將 HTML 轉成 PDF 也很簡單，直接用 pdfkit.from_file(xx.html,target.pdf) 方法直接將網頁轉成 PDF，而且這樣轉成的 PDF 也是帶圖片的。

在線咨詢

上一篇：每個非網站開發人員都應該了解的21個HTML基礎知識
下一篇：HTML+CSS：css元素浮動詳解，使用浮動制作導航欄菜單

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5企業級求職必備3D螺旋，旋轉，球形特效具體解析文章

TML5企業級求職必備3D螺旋，旋轉，球形特效具體解析文章