如何使用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. Selenium系列(三) - 针对元素常见的简单操作

    如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...

  2. 题解 P4344 【[SHOI2015]脑洞治疗仪】

    前言 这道题目呢,看上去很难,实际上我们可以用线段树解决这道题目. 正文 我们维护 sum.len.tag.lmax.rmax.ans. sum 就是这段区间非脑洞的个数 len 就是这段区间的长度 ...

  3. Java并发编程(03):多线程并发访问,同步控制

    本文源码:GitHub·点这里 || GitEE·点这里 一.并发问题 多线程学习的时候,要面对的第一个复杂问题就是,并发模式下变量的访问,如果不理清楚内在流程和原因,经常会出现这样一个问题:线程处理 ...

  4. 3.Scikit-Learn实现完整的机器学习项目

    1       完整的机器学习项目 完成项目的步骤: (1)    项目概述 (2)    获取数据 (3)    发现并可视化数据,发现规律. (4)    为机器学习算法准备数据. (5)    ...

  5. java后台调用文件上传接口

    借鉴:https://blog.csdn.net/yjclsx/article/details/70675057 /** * 调用流程上传文件接口上传文件 * @param url * @param ...

  6. 字节转换函数 htonl*的由来与函数定义...

    字节转换字符由来: 在网络上面有着许多类型的机器,这些机器在表示数据的字节顺序是不同的, 比如i386芯片是低字节在内存地址的低端, intel处理器将32位的整数分4个连续的字节,并以字节序1-2- ...

  7. [React]Hook初探

    Hook是什么 Hook是React从16.8开始支持的特性,使用Hook可以在不使用class时使用state Hook支持在不需要修改组件状态的情况下复用逻辑状态,从而解决使用render pro ...

  8. [noip模拟赛]某种数列问题<dp>

    某种数列问题  (jx.cpp/c/pas) 1000MS 256MB 众所周知,chenzeyu97有无数的妹子(阿掉!>_<),而且他还有很多恶趣味的问题,继上次纠结于一排妹子的排法以 ...

  9. Codeforces 631 (Div. 2) C. Dreamoon Likes Coloring 思维or构造

    https://codeforces.com/contest/1330/problem/C 给n个格子染色,有m种颜色,要求最后的所以格子被染色,并且有m种颜色. 染色要求:每种颜色有一个值li,选择 ...

  10. B - 来找一找吧 HihoCoder - 1701(排列组合 + 同余差值相同)

    这次到渣渣问桶桶了... 准备给你n个数a1, a2, ... an,桶桶你能从中找出m个特别的整数吗,我想让任意两个之差都是k的倍数. 请你计算有多少种不同的选法.由于选法可能非常多,你只需要输出对 ...