css3实现图片划过一束光闪过效果(图片光影掠过效果)

css:

.guangshu { display:block; position: relative; width:800px; height:450px; margin:0 auto;}
.guangshu:before { content: ""; position: absolute; width:200px; height: 100%; top: 0; left: -150px; overflow: hidden;
background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,.2)), 

我应该使用哪些媒体查询断点?

在弄清楚要使用哪些媒体查询断点之前,我们需要查看我们要设计的设备。

我已经研究了一些常见的设备分辨率,并且大多数可以分为几类。我列出了这些类别,以及它们可以满足的分辨率:

  • 移动肖像320像素至414像素)—适用于4“至6.9”屏幕的设备。
  • 移动横向(568像素至812像素)—相同,但横向。
  • 平板电脑肖像768像素至834像素)—适用于设备7“至10”
  • 平板电脑横向(1024像素至1112像素)—同上,肖像上也有12英寸平板电脑
  • 笔记本电脑和台式机显示器(1200px +)-变化很大,但通常为1200px以上

下一步:那么我们如何理解这些设备?

JS获取网页高度和宽度

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight…

Chrome 80 中 Iframe 跨域 Cookie 的 Samesite 问题

新项目要嵌入之前的一个项目,而且该被嵌入项目之前提供给第三方使用,他们也是用的iframe。以前都是好的,但是现在发现要是iframe的地址和父级的地址不同源,项目登录时无法设置cookie。

一开始以为后端出问题了,后来换火狐、ie edge 都是可以的,并且其他人的Chrome也有可以用的。…

23条规则以最小的麻烦开始软件创业

在过去的5年中,我尝试了很多事情,并且发现有很多方法可以为自己制造麻烦,从而浪费时间和精力,使您无法在业务中建立价值。这是我第二篇关于从引导中学到的教训的文章。如果您想继续关注,可以订阅此页面的更新

对于一家陷入困境的公司而言,避免麻烦尤为重要。正如我在上一篇有关蜘蛛网企业家的文章中所讨论的那样,在引导的早期阶段,除非您这样做,否则什么也不会发生,因此,节省时间和精力非常重要。

如果您想在运行软件业务时完全避免麻烦,则可以遵循以下规则中的每一个,我没有特别的顺序:…

ffmpeg用mp4分段将hls保存到m3u8

ffmpeg用mp4分段将hls保存到m3u8

我正在寻找一个命令ffmpeg,用mp4分段文件保存实时输入(rtmp或hls)以使m3u8成为可能。我知道这是可能的,即有infohttps://bitmovin.com/hls-news-wwdc-2016/但我尝试的每个命令都会生成ts文件。有人知道解决方案

ffmpeg -re \
  -i http://inputfile.m3u8 \
  -c:v copy \
  -c:a copy \
  -hls_time 10 \
  -hls_list_size 3 \
  -hls_wrap 3 \
  -hls_segment_type fmp4 \
  /location/to/file/index.m3u8

        

js实现页面loading效果

废话不多说,直接上代码

//在页面未加载完毕之前显示的loading Html自定义内容
var _LoadingHtml = '<div id="loadingDiv" style="display: none; "><div id="over" style=" position: fixed;top: 0;left: 0; width: 100%;height: 100%; background-color: #f5f5f5;opacity:0.5;z-index: 1000;"></div><div id="layout" style="position: fixed;top: 40%; left: 40%;width: 20%; height: 20%;  z-index: 1001;text-align:center;"><img src="/js/plugins/layer/skin/default/loading-0.gif" /></div></div>';
//呈现loading效果
document.write(_LoadingHtml);
 
//移除loading效果
function