分类 默认分类 下的文章

磨砂玻璃效果开发

css3中有属性filter专门去处理一些滤镜效果, 其中 blur(20px)代表高斯模糊(20px代表20个像素点混合) .

如果想实现下图效果则需要用点非常规的办法

请输入图片描述

上图实现方法是 背景图+中间磨砂的图片+ 弹出内容

body内标签

  <div class="container">
    <div class="content">
      <h1>弹出信息</h1>
      <p>巴拉巴拉巴拉巴拉</p>
    </div>
  </div>

css代码

* {
      margin: 0;
      padding: 0;
    }

    .container {
      width: 100vw;
      height: 100vh;
      position: relative;
      background: url('http://qn.fengyitong.name/1.jpg') center / cover fixed;
      /* 
      上面拆分开来的写法
      background-image: url('http://qn.fengyitong.name/1.jpg'); 
      background-attachment: fixed;
      background-size: cover;
      background-position: center; */
    }

    .content {
      position: absolute;
      left: 50%;
      top: 30%;
      margin-left: -150px;
      width: 300px;
      height: 300px;
      background: hsla(0, 0%, 100%, 0.3);
    }

    .content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      filter: blur(20px); /* 对于中间的内容部分的背景进行高斯模糊 */
      background: url('http://qn.fengyitong.name/1.jpg') center / cover fixed;
      z-index: -1;    /* 让模糊部分背景置于内容后方 */
      margin: -30px; /* 保证边缘部分进行高斯模糊 */
    }

    .content {
      overflow: hidden; /* 超出的部分隐藏(模糊部分margin会导致超出) */
      z-index: 1; /* 让模糊部分背景置于内容前方 */
    }

以上可以实现一个全屏的背景+中间磨砂效果,但是如果说我们想要一个非全屏的背景,中间磨砂效果的话(即container的宽高不是满屏),这个css要如何做出这效果我没想到,想到最简单的办法可能是要用canvas去辅助实现生成背景图片.后面如果有时间的话我再补上这块的js代码.

在Markdown的表格中的行内代码里输入转义字符

今天在写API文档的时候碰到需要在表格中填 |,但是markdown本身的表格|代表分割线
在表格中需要用&#124;代替,但是本身又想用行内代码包裹使得样式好看
最终解决方案:

|  名称 |  说明 |
| ------------ | ------------ |
| xxx| 分隔符: <code>&#124;</code> |

记录一下自动化部署ssr过程

记录一下,免的自己后面忘记.

下载脚本&运行脚本

wget --no-check-certificate -O shadowsocks.sh https://raw.githubusercontent.com/teddysun/shadowsocks_install/master/shadowsocks.sh
chmod +x shadowsocks.sh
./shadowsocks.sh 2>&1 | tee shadowsocks.log

另外一个源

wget --no-check-certificate https://raw.githubusercontent.com/quniu/shadowsocks-all/master/install/shadowsocks-all.sh
chmod +x shadowsocks-all.sh
./shadowsocks-all.sh 2>&1 | tee shadowsocksR.log

安装

第一步输入密码,
第二步输入端口号,
第三步输入加密方式 (默认7)

任意键等待安装

修改配置文件

vi /etc/shadowsocks.json 

配置防火墙

systemctl stop firewalld.service

启动/停止ss服务

ssserver -c /etc/shadowsocks.json -d start
ssserver -c /etc/shadowsocks.json -d stop
// 端口处理
// 查看所有打开的端口: 
firewall-cmd --zone=public --list-ports
// 添加
firewall-cmd --zone=public --add-port=80/tcp --permanent    (--permanent永久生效,没有此参数重启后失效)
// 重新载入
firewall-cmd --reload
// 查看
firewall-cmd --zone= public --query-port=80/tcp
// 删除
firewall-cmd --zone= public --remove-port=80/tcp --permanent

开启bbr加速

wget --no-check-certificate https://github.com/teddysun/across/raw/master/bbr.sh
chmod +x bbr.sh
./bbr.sh

重启后验证是否开启bbrlsmod | grep bbr返回看到 tcp_bbr 就说明 BBR 已经启动了

记录一下v2ray

bash <(curl -L -s https://install.direct/go.sh)

注意要处理防火墙

WEBGL 编程指南 unexpected token after conditional expression

WEBGL编程指南书中对应的demo文件中,有好几个demo文件直接运行无法显示页面效果,控制台会报错:

Failed to compile shader: ERROR: 0:3: 'GL_ES' : unexpected token after conditional expression

原因是demo中写错了,修改一下即可:

...
// Fragment shader program
var FSHADER_SOURCE =
  '#ifdef GL_ES\n' +
  'precision mediump float;\n' + // Precision qualifier (See Chapter 6)
  '#endif GL_ES\n' +
...

这里#endif 不应该加GL_ES,去掉即可,那一行改成:
'#endif \n' +

笔者应该是复制错了吧...我看了一下好多地方是这样写.
为像我一下在学这本书的人记录一下.

ajax请求后无法打开新页面

最近项目需求需要在系统中打开其他系统的内部网页,一开始是ajax请求本地后台,后台解析得到token后返回,然后前端跳转,发现这样做浏览器不会执行window.open打开新页面.
解决方案:1 同步ajax,2 先新建窗口,然后ajax后对新窗口的location.href赋值
其实第2种方案有特定情况下没法访问的问题.

个人认为最佳方案还是不通过ajax请求,直接打开新窗口,让后台重定向比较好,最终解决方案也是这样去做的