如何使用python,才能像人民日报的“点亮”武汉景点

前言

文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。

作者:Allen

PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取http://t.cn/A6Zvjdun

4月8日零时起,武汉解除了离汉离鄂通道管控措施,有序恢复对外交通。“封城”76天后,武汉与外界的通道重新开启。

昨晚,人民日报公众号推送了一篇文章,通过点击武汉的各个景点图片,可以将图片“点亮”,也就是通过点击将黑白色调的图还原为色彩绚丽的图

点击前后内容如下:

其实,我们只要有电脑就能实现啦,也不用装什么软件和编程环境。

首先,你可以准备几张需要的彩色图片,然后将他们放在一个文件夹中,例如我对应人民日报的武汉景点找了一些高清大图,按顺序命名好,如下图所示,放在了名为img的文件夹中:

之后新建一个html文件,内部写入如下代码:

例如我将该文件保存为“点亮.html”,将该文件与img文件夹放在同一路径下。

然后以浏览器方式打开“点亮.html” 即可看到如下页面:

当你鼠标点击图片时,图片会从黑白慢慢渐变转为彩色,如下图所示:

代码中首先通过-webkit-filter: grayscale(1);将所有图片样式设置为黑白。使用JavaScript的鼠标点击事件,当鼠标点击图片时,将设置黑白的样式去除,同时指定不是立刻去除,而是通过 transition: all 2s设定转变事件为2秒,所以当我们鼠标点击图片时,会发生颜色的渐变。

原理就是这么简单~快来一起尝试一下吧!

武汉加油!中国加油!

2020年最新Python教程:

如果你处于想学Python或者正在学习Python,Python的教程不少了吧,但是是最新的吗?

说不定你学了可能是两年前人家就学过的内容,在这小编分享一波2020最新的Python教程。

以上这些教程小编已经为大家打包准备好了,希望对正在学习的你有所帮助!

获取方式,私信小编 “ 资料 ”,即可免费获取哦!

如何使用python,才能像人民日报的“点亮”武汉景点的更多相关文章

  1. 《简明python教程》笔记一

    读<简明Python教程>笔记: 本书的官方网站是www.byteofpython.info  安装就不说了,网上很多,这里就记录下我在安装时的问题,首先到python官网下载,选好安装路 ...

  2. Python 启动本地服务

    在 Linux 服务器上或安装了 Python 的机器上,Python自带了一个WEB服务器 SimpleHTTPServer,我们可以很简单的使用  python -m SimpleHTTPServ ...

  3. 编译安装带ssl 模块指定版本Python

      出现这个或者fatal error: openssl/名单.h: No such file or directory.都是没有安装libssl-dev- libssl-dev包含libraries ...

  4. python批量处理excel文件数据

    https://www.zhihu.com/question/39299070?sort=created 作者:水中柳影链接:https://www.zhihu.com/question/392990 ...

  5. 简明python教程 --C++程序员的视角(四):容器类型(字符串、元组、列表、字典)和参考

    数据结构简介 Python定义的类型(或对象)层次结构在概念上可以划分为四种类别:简单类型.容器类型.代码类型 和内部类型. 可以将 PyObject 类之下的所有 Python 类划分为 Pytho ...

  6. python入门语法总结 zz

    http://renjie120.iteye.com/blog/680126 1.python是一个解释性语言: 一个用编译性语言比如C或C++写的程序可以从源文件(即C或C++语言)转换到一个你的计 ...

  7. OK - A byte of python - 读书笔记

    看这本书的目的:再熟悉基本概念. 大部分都是知道,但是需要 明确 出来的 概念. - 欢迎吐槽错误,非常感谢. <A byte of python> - THIS 1. 组织行 - 形式: ...

  8. 【和我一起学python吧】python入门语法总结

    1.python是一个解释性语言: 一个用编译性语言比如C或C++写的程序可以从源文件(即C或C++语言)转换到一个你的计算机使用的语言(二进制代码,即0和1).这个过程通过编译器和不同的标记.选项完 ...

  9. Python之数据结构篇

    简介: 数据结构是可以处理一些数据的结构,或者说,他们是用来存储一组相关数据的.在python中有三种内建的数据结构,分别是列表.元组合字典.我们将会学习如何使用它们是编程变得简单. 列表 list是 ...

随机推荐

  1. NBL小可爱纪念赛「 第一弹 」 游记(部分题解)

    比赛链接 洛谷:禁止含有侮辱性质的比赛 . ??? 反正我觉得,gyx挺危险的 不说废话. 首先,比赛经验,前几个小时不打,跟着刷榜. 一看 T1. 发现是道水题,直接切掉了. 然后看到了 T2. 感 ...

  2. BFC是什么?BFC有什么用?看完全明白

    一.BFC是什么? 官方定义 BFC(Block Formatting Context,块格式化上下文) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交 ...

  3. vim-0-indent(缩进)

    缩进: 参考自http://liuzhijun.iteye.com/blog/1831548,http://blog.csdn.net/chenxiang6891/article/details/41 ...

  4. 不再忍受龟速 Github,你也可以试试在云开发上部署个人博客!

    Hexo 是被大家广泛使用的静态博客系统, 除了在 Github Pages 部署以外,现在你有了一个新的选择,那就是使用云开发静态网站功能来部署啦! 云开发(CloudBase)是一款云端一体化的产 ...

  5. 超越Mask-RCNN:谷歌大脑的AI,自己写了个目标检测AI

    这是一只AI生出的小AI. 谷歌大脑的Quoc Le团队,用神经网络架构搜索 (NAS) ,发现了一个目标检测模型.长这样: △ 看不清请把手机横过来 它的准确率和速度都超过了大前辈Mask-RCNN ...

  6. Jmeter4.0接口测试之案例实战(七)

    在前面的知识体系中介绍了Jmeter的基本应用,下来通过具体的案例来看Jmeter在接口测试中的具体案例实战部分. HTTP是基于应用层的协议,底层的网络传输层它不需要去关心,同时它是一个无状态的协议 ...

  7. python+selenium环境搭建步骤

    一.自动化简介 1.自动化测试概念: 是把以人为驱动的测试转化为机器执行的一种过程,它是一种以程序测试程序的过程 2.自动化测试分类: 一般IT上所说的自动化测试是指功能自动化测试,通过编码的方式用一 ...

  8. Go深入学习之select

    select的用法 1)select只能用于channel的操作(写入.读出),而switch则更通用一些 2)select的case是随机的,而switch里的case是顺序执行 3)select要 ...

  9. C 2010年笔试题

    1 有一个函数, 写一段程序,输入的值,输出的值. #include <stdio.h> void main() { int x,y; printf("输入x:"); ...

  10. 模块 time datetime 时间获取和处理

    模块_time 和时间有关系的我们就要用到时间模块.在使用模块之前,应该首先导入这个模块. 1 延时 time.sleep(secs) (线程)推迟指定的时间运行.单位为秒. 2 获取当前时间戳tim ...