- 博客(13)
- 资源 (1)
- 收藏
- 关注
原创 使用css3 filter属性实现图片毛玻璃效果
可用于背景图片的遮盖和虚化处理;img { filter: url(blur.svg#blur);/* FireFox, Chrome, Opera */ -webkit-filter: blur(5px);/* Chrome, Opera */ -moz-filter: blur(5px); -ms-filter: blur(5px); filter...
2019-12-29 22:05:45 17593
原创 JS+CSS实现滚动时间样式
效果图:动画实现的方案是缩减上方div的高度带动整体上滑,然后用Js操作dom将最上方的div移到最下方。主要css:.continer { display: flex; justify - content: center; align - items: center; font - size: 40 px;}.scroll { wi...
2019-12-25 22:08:52 18734
原创 关于npm依赖包全局安装后报依赖包找不到的解决方法
npm全局安装命令npm install -g <package_name>如果安装之后仍然报依赖包找不到,原因大概率是未配置npm依赖包的环境变量配置方法:1.Windows环境增加环境变量 NODE_PATH 指向到全局包的安装路径关于全局包的安装路径,默认路径为C盘用户目录下C:\Users\用户名\AppData\Roaming\npm\node_mo...
2019-12-24 22:36:26 26352 1
原创 使用Grid布局制作拼图小游戏
在学习grid布局时突发奇想利用这个布局的特性做一个拼图小游戏先简单实现了一个demo,后期再优化,效果如下图:先上一下主要的css样式.container { display: inline-grid; grid-template-columns: repeat(3, 100px); grid-template-rows: rep...
2019-12-19 00:02:35 17274
原创 JS+CSS实现页面滚动切换图片(从边角扩散)的效果
先上效果图:实现思路:两个绝对定位的div重合,通过监听页面滚动位置信息,动态的改变上面的div宽高、背景定位、边角半径div样式设计:.bgTrans { height: 400px; position: relative; } .bgTrans div { position: absolute; ...
2019-12-17 22:32:37 17903
原创 JS+CSS实现漂亮的日历特效(仿win10系统日历)
初衷:无意见发现win10的系统日鼠标悬浮的特效非常好看,想尝试一下用CSS和JS实现一下。先上一下目前实现的效果图:难点是这种间隔效果和鼠标移动效果的实现,如下图间隔效果的实现我采用了background-clip: content-box;padding: 2px;background-color: gray;border: 1px solid gray;样...
2019-12-12 23:51:17 19793
原创 兼容IE8的多文件上传实现
兼容IE8的注意点:原生多文件属性multiple只在IE10/11上有效,IE8不兼容无法使用 formdata对象同样只支持在IE10/11,IE8无法使用 很多API在IE8上无法使用,同样是兼容的难点 IE8的安全机制,使一些操作无法实现本文使用原生JS对文件进行简单处理实现多文件上传,未使用其他插件。实现思路:由于multiple属性无法使用,采取通过增加input框...
2019-12-11 23:40:11 18794
原创 JS+CSS实现自定义页面滚动条
效果图如下:首先隐藏原生的滚动条(仅限chrome浏览器)html::-webkit-scrollbar{ display: none;}通过JS监听页面滚动document.addEventListener("scroll", function(e) { var ev = e || window.event; var height...
2019-12-10 23:10:54 16820
原创 JS+CSS实现按钮点击波纹扩散效果
实现点击时按钮背景为动态扩散的波纹效果。效果图如下:页面代码:<!DOCTYPE html><html><head> <title>按钮点击特效</title></head><style> input[type=button]{ outline: none; hei...
2019-12-09 23:05:03 18700
原创 使用JS判断日期的有效性
为了方便,这里使用的是yyyy/MM/dd 格式的日期。一般策略:将年月日分别取出,根据是否闰年和每月的日期进行判断。function judgeDate(date){ const rmons = [31,29,31,30,31,30,31,31,30,31,30,31], pmons = [31,28,31,30,31,30,31,31,30,31,30,31]; v...
2019-12-05 22:54:43 17893
原创 CSS——设置页面整体变为灰色
应用于一些特殊的地方,比如设置怀念模式等。body>* { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);...
2019-12-04 22:48:20 18531
原创 CSS布局——圣杯布局、双飞翼布局
圣杯布局和双飞翼布局解决的都是两边顶宽、中间自适应的三栏布局问题,要实现中间部分优先渲染。先上两个demo。圣杯布局:<!DOCTYPE html><html><head> <title>圣杯布局</title> <meta charset="utf-8"> <style> .heade...
2019-12-03 23:06:16 16642
原创 在Centos上搭建jupyter服务
初衷 方便在服务器上跑一些python爬虫脚本环境准备 Centos × 64 服务器开始 由于Centos预装的是2.×版本的python,而jupyter需要3.4以上的python版本,所以需要再安装python3.4或以上的版本。(注意不要将之前2.×版本的python删掉,否则会出现系统异常)要安装python3,首...
2019-12-02 22:17:55 16759
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人