Neumorphic Elements

发表于2023-04-11|更新于2026-02-24

|浏览量:

与智者同行，必得智慧；与愚者相伴，必定无益处。——大卫王

分享一些前端漂亮的小组件

https://codepen.io/myacode/pen/PoqQQNM

效果还是非常惊艳的

相关推荐

读书使人充实，思考使人深邃，交谈使人清醒。——富兰克林 https://codepen.io/collection/XLebem/ 这里有anime.js实现的不少案例例如移动端的卡片弹出动画实现： https://codepen.io/aryankap/pen/poERmEM 带进度条的提交按钮： https://codepen.io/andrewmillen/pen/MoKLob 带动画的小图标： https://codepen.io/nat-davydova/details/dyorEMm 夜间模式切换按钮： https://codepen.io/borntofrappe/details/aboPapm 等等

判断浏览器窗口滚动到最底部

任何人都应该有自尊心自信心独立性，不然就是奴才。但自尊不是轻人，自信不是自满，独立不是弧立。——徐特立首先是昨天我们说的vue中绑定@scroll事件，别忘了加对应的高度，以及检查overflow-y： 123<div @scroll="onScroll" class="allow-scroll"> 我是很高很长很长（超过外部div高度）的内容...</div> 然后是滚动事件处理： 12345678onScroll(e) { // Y轴滚动距离偏移高度总高度 let { scrollTop, clientHeight, scrollHeight } = e.target console.log(`scrollTop + clientHeight ${scrollTop + clientHeight} >= scrollHeight-1 ${scrollHeight - 1}`) if (scrollTop + cl...

青春是一种持续的陶醉，是理智的狂热。——拉罗什富科分享一个vue图片裁剪组件官网：https://github.xyxiao.cn/vue-cropper/ 演示demo：http://github.xyxiao.cn/vue-cropper/example/ 还是很不错的 1. 安装1234# npm 安装npm install vue-cropper# yarn 安装yarn add vue-cropper 如果你没有使用 npm 在线例子vue-cropper + vue.2x 在线例子vue-cropper@next + vue.3x 服务器渲染 nuxt 解决方案设置为 ssr: false 1234567891011module.exports = { ... build: { vendor: [ 'vue-cropper ... plugins: [ { src: '~/plugins/vue-cropper', ssr: false } ...

真理的范围在大炮射程之内。——俾斯麦 https://astro.build/ https://github.com/withastro/astro Astro：为内容驱动的网站打造的现代前端框架在前端框架百花齐放的今天，React、Vue、Svelte 等已经牢牢占据开发者的视野。而 Astro，则以一种“反潮流”的方式切入了战场——它不试图成为全能框架，而是专注于一个核心场景：内容驱动的静态网站。什么是 Astro？Astro 是一个现代的静态网站构建工具，主打“少 JavaScript，多性能”。它允许开发者使用多种框架（React、Vue、Svelte、Solid 等）构建组件，但最终构建时，只会输出最小的 HTML、CSS 和必要的 JS，实现几乎“零 JS 运行时”。一句话总结：Astro 是为了构建快如闪电的内容网站而生的静态站点生成器。核心特性1. 零 JS 默认输出Astro 默认不会给你的页面添加任何 JavaScript，除非你显式启用交互。这种“按需加载”策略，让页面加载速度大幅提升，非常适合博客、文档、企业官网等。 2. 跨框架组件支持在一个项...

学习uni-app官方教程

生命是一条奔流不息的河，我们都是那个过河的人。——席慕蓉官网我们直接实战创建两个项目从hello-uniapp中复制common文件夹以及static下面的uni.ttf文件到news项目同目录下然后是复制App.vue中的样式库 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091<script> export default { onLaunch: function() { console.log('App Launch') }, onShow: function() { console.log('App Show') }, onHide: fun...

进阶学习css的filter属性

经常谈论别人的短处只会使一个人心胸狭窄，使一个人变得非常多疑，非常无聊。——泰戈尔首先是这个教程 Filter | CSS-Tricks 还有这个 Filter | CSS-Tricks 这里还有一个在线演示的网址 CSS filter Editor 你可以任意滑动值查看效果 See the Pen CSS filter Editor by Mads Stoumann (@stoumann) on CodePen.

阿超

我的名字叫阿超年龄25岁家在北京市职业是软件开发每天最晚也会在八点前回家不抽烟酒浅尝辄止晚上十二点上床保证睡足八个小时睡前写一篇博客再做二十分钟俯卧撑暖身然后再睡觉基本能熟睡到天亮像婴儿一样不留下任何疲劳和压力就这样迎来第二天的早晨健康检查结果也显示我很正常我想说明我是一个不论何时都追求内心平稳的人不拘泥于胜负不纠结于烦恼不树立使我夜不能寐的敌人这就是我在这社会的生活态度

数据加载中