整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

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。

需解决的问题

其实我们要解决的有两个问题：

  1. 公众号里的图片没有保存到 PDF 文件里。
  2. 公众号里的一些代码片段，尤其那些单行代码比较长的，保存成 PDF 会出现代码不全的问题。
  3. 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小时内与您取得联系。

推荐阅读
友情链接 城厢区 稷山县 博湖县 会宁县 乐清市 靖西县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服