首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

FengFocus 焦点插件(昨天写了博客,今天封装了)

去年自己写的第一个焦点插件,命名为 FengFocus 1.0 版本。在我所做的几个项目中也都运用了。但是我自己却很不满意。 为什么呢?...所以我一直想要重写这个焦点插件。但是一来是懒,二来还是懒。一直没去写。 昨天反法西斯70周年阅兵,我顿时觉得应该为祖国做点贡献,因此决定重写。...表现形式完全css化,有很多焦点插件将表现形式写在了js中,优点是只要一个文件,而不用管css。缺点就是,修改样式异常困难,为我不喜。...其中,图片 alt 值是用于 焦点 的标题。 data-info值是用于焦点简介。...scss 预编译版本 #FengFocus { // 设定变量 焦点的宽高大小 $width:500px; $height:400px; // 焦点外框的CSS width: $width

52520

小程序实现全屏幕高斯模糊背景

我们在做小程序开发过程中,有时候会遇到这样的需求,用一张图片做全屏幕背景。 并且实现毛玻璃效果(高斯模糊),今天就来带大家一步步的实现这个效果 老规矩,先看效果 1,用网络图片实现 ?...通过上面两张可以看出来,我们既可以用网络图片来实现高斯模糊,又可以用本地图片来实现。 一,先来用本地图片做全屏背景 1,先在wxml文件里引入本地图片 ?...2,然后设置wxss样式 通过下图几段样式代码,就可以轻松实现全屏背景 ? 这个图片大家应该熟悉吧,这是石头哥的头像。原本是个正方形,我们要想实现全屏背景,就要用到下面这几行代码了。...通过上面这张和下面这张对比,可以看到filter的值越大越模糊。 ? 这样我们就轻松的实现了本地图片的高斯模糊效果。 但是有时候我们不仅仅是用到本地图片,我们还需要用到网络图片。...原图长这样,可以看到我们做全屏背景的时候把这个图片从中间裁剪拉伸了 background属性里的 center/cover起了主要作用。 ? 2,然后就是用filter做模糊效果了 ?

1.9K32

完美的背景全屏css代码 – background-size:cover?

在写主题样式的时候经常会碰到用背景铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持...以图片bg.jpg为例 最简单,最高效的方法 CSS3.0 归功于css3.0新增的一个属性background-size,可以简单的实现这个效果,这里用fixed和center定位背景,然后用background-size...尽管如此,总比留空白好多了吧(如果背景bg.jpg的宽高够大,则可以不用这段,变成简单的平铺,比图片变形效果好写,大家可以尝试下) 如果你觉得上面的方法不是很满意,那试试下面这种 用img形式来实现背景平铺效果

6.3K40

《前端技巧复盘》使用纯css实现网站换肤和焦点切换动画

你将收获 •网站换肤设计方案介绍 •:target伪类介绍和用法以及如何使用css实现网站换肤 •transition动画以及如何用纯css实现焦点动画 效果展示 1.网站换肤 2.焦点动画 实现思路..."#bg1" id="one"> 2.焦点动画...焦点动画主要来自我们司空见惯的轮播,我们点击轮播的某个指示点时,可以切换会对应的图片,焦点轮播常用的方案主要是用javascript和css共同实现,方案有大致以下几种: •bootstrap...•PhotoSwipe 适用于移动设备和桌面电脑,基于原生JavaScript的模块组件 以上介绍的方案都很成熟,我们可以直接拿来使用,但是为了追求简洁和代码量最低,我们有办法用纯css实现一个简单的焦点切换动画吗...2.初始化页面时只让第一个焦点有宽度,其他宽度都设置为零,当控制点激活时,然控制点对应的目标对象的宽度设置为正常值,其他的非目标对象都设置为零3.给焦点添加transition过渡动画4.优化焦点和控制点样式

3.8K30

《前端5分钟》之使用纯css实现网站换肤和焦点切换动画

你将收获 •网站换肤设计方案介绍•:target伪类介绍和用法以及如何使用css实现网站换肤•transition动画以及如何用纯css实现焦点动画 效果展示 1.网站换肤 ? 2.焦点动画 ?..."#bg1" id="one"> 2.焦点动画...焦点动画主要来自我们司空见惯的轮播,我们点击轮播的某个指示点时,可以切换会对应的图片,焦点轮播常用的方案主要是用javascript和css共同实现,方案有大致以下几种: •bootstrap...•PhotoSwipe 适用于移动设备和桌面电脑,基于原生JavaScript的模块组件 以上介绍的方案都很成熟,我们可以直接拿来使用,但是为了追求简洁和代码量最低,我们有办法用纯css实现一个简单的焦点切换动画吗...2.初始化页面时只让第一个焦点有宽度,其他宽度都设置为零,当控制点激活时,然控制点对应的目标对象的宽度设置为正常值,其他的非目标对象都设置为零3.给焦点添加transition过渡动画4.优化焦点和控制点样式

4.1K20

Python写一个像QQ可快捷键唤起区域截屏的应用

搜寻了一下Python有截图功能的库,基本都是全屏截图和程序输入坐标来区域截图,没办法用鼠标选择可视化截图。...不过网上有同学提出通过写一个GUI程序,把全屏截图展示在这个GUI界面上,然后在GUI上可以实现鼠标可视化选取功能。...Tkinkter可以监听键盘事件,但是只有当焦点在Tkinter上时才会响应键盘事件,而截图应用是截其他地方的,比如浏览器,聊天软件等等,焦点这时肯定不在Tkinter上,所以需要另找一个可以全局监听键盘事件的库...详细的实现原理是: 当程序运行起来后就在后台监听键盘,当键盘按下ctrl+shift+M时就使用PIL做全屏截图,接着用Tkinter把全屏截图显示出来,通过Tkinter的画布(canvas)和鼠标选取做二次截图

2.3K41
领券