悬停卡片效果
发表于|更新于
|浏览量:
人在无端微笑时,不是百无聊赖,就是痛苦难当。——王小波
分享一个通过css实现的卡片悬停效果
代码地址:cards: 悬浮卡片
在线演示:Document
相关推荐
2024-07-24
js日期库moment
健全的身体比金子还珍贵,强壮的体魄比享用不尽的财富还有价值。——佚名 https://github.com/moment/moment 用于解析、验证、操作和格式化日期的 JavaScript 日期库。 文档: Moment.js | Docs 使用非常简单 1npm install moment 12var moment = require('moment'); // requiremoment().format(); 或者 12import moment from 'moment';moment().format(); 解析时间 1var day = moment("1995-12-25"); 格式化时间: 1moment("12-25-1995", "MM-DD-YYYY");
2023-11-08
js惰性函数
要深入了解人的方法只有一个,就是不急于下定论。——圣·普波 在js中我们可以使用惰性函数,用于重新定义函数自身的行为 例如: 12345678910111213141516171819202122function addEvent(type, el, fn) { if (window.addEventListener) { addEvent = function(type, el, fn) { el.addEventListener(type, fn, false); } } else if (window.attachEvent) { addEvent = function(type, el, fn) { el.attachEvent('on' + type, fn); } } else { addEvent = function(type, el, fn) { el['...
2022-12-28
css直接引用svg代码
一切安乐,无不来自困苦。——《我是猫》 有些时候我们想直接引入一个svg图标,又不想创建svg文件,或者编写svg代码到html中,想直接在css中引入 可以转码+加前缀直接引用,这是一段svg代码 123456789101112<!-- svg: first layer --><svg viewBox='0 0 161 161' xmlns='http://www.w3.org/2000/svg'> <filter id='noiseFilter'> <feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/> </filter> <rect width='100%'...
2021-12-04
Promise
人活在世,不过一场美丽的寄居。——简嫃 在前端开发中经常会使用异步方法 这里介绍Promise函数 定义方式: 12345// Promise内部构造参数为一个闭包,闭包中传入你想要异步处理的逻辑new Promise((resolve,reject)=>{ // 这里resolve表示正常处理异步逻辑后传送回调,reject则是异常逻辑或错误逻辑时执行,当异步方法中抛出异常,会自动调用reject,这里也可以手动调用 resolve(1)}) 然后定义完了,我们就可以开始调用 调用写法如下: 12345678new Promise((resolve,reject)=>{ // 假设我这里异步方法处理完后得到的结果为1,我就传入一个1 resolve(1)}).then(res=>{ // 然后异步方法执行完了,我再对结果进行异步处理,让得到的1再加一个1 console.log(res+1)}) 使用then可以执行异步方法后续处理,将异步方法的回调的结果作...
2022-12-25
mask
任凭人群来往,任凭钟声响起,小孩啼哭——决心好好过上一天。——梭罗《瓦尔登湖》 分享一个css属性mask: https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask https://css-tricks.com/almanac/properties/m/mask/ CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 这个属性很类似于background属性,但不同的是,background是背景在元素下层,mask是遮罩在元素上层,且mask不支持直接指定color,只支持image对象如图片、svg等 同样两者都是组合属性,意味着可以用简写,而不是一个一个去指定 12mask-image: url(/img/oss/blog/vampireachao/bilibili-line.svg);mask-repeat: no-repeat; 可以简写为 1mask: url(/img/oss/blog/vampireachao/bilibili-line.svg) ...
2021-08-21
Failed to resolve loader: less-loader
但愿苍生俱饱暖,不辞辛苦出山林。一一于谦 本来我今天遇到这个问题了 1Failed to resolve loader: less-loader You may need to install it 我一看:你可能需要安装一下less-loader,我直接输入命令安装 1cnpm i less-loader 执行完毕,再次运行发现报错信息变了: 1TypeError: this.getOptions is not a function 原来是版本太高了,于是卸载 1cnpm uni less-loader 然后安装低版本的 1cnpm i less-loader@6.0.0 再次启动就好了
