在 Vue.js 中,紧密耦合的组件通常共享状态或行为,这使得它们彼此依赖。 例如:Avatar 和 AvatarGroup,Tabs 和 TabPanel,Accordion 和 AccordionPanel。 这种方式在某些模式和用例中很有用,例如使用 prov...
几行代码轻松实现高级感拉满的磨砂玻璃渐变背景
看,下面一个很有意思的 UI 效果: 主要看看这个页面的背景,一个磨砂(毛玻璃)质感效果的渐变背景图,看上去是比较高级的。 剥离掉页面的内容元素,只剩下背景的话,大概是这样: 一开始是打算切图实...
现代 CSS 解决方案:全尺寸的带圆角的渐变边框
在过往,想使用纯 CSS 实现纯粹的,内部透明渐变边框,是一件非常困难的事情,像是这样: 这个效果的几个核心难点: 边框带渐变色 边框支持设置 border-radius 内部支持透明 思考一下,使...
你不知道的 async、await 魔鬼细节
0、前言 关于promise、async/await的使用相信很多小伙伴都比较熟悉了,但是提到事件循环机制输出结果类似的题目,你敢说都会? 试一试? 🌰1: async function async1 () { await new Promise((res...
太酷了!用 CSS 让背景渐变动起来!
在这个小技巧中,我们将展示如何用 CSS 轻松地让背景渐变动起来。 在最近的一篇文章中,我们展示了 如何在文本上设置背景渐变。下面的 CodePen 演示展示了结果。 h1 { color: transparent; -webkit...
Cloudflare支持的端口
Cloudflare 默认代理发往下列 HTTP/HTTPS 端口的流量。 Cloudflare 支持的 HTTP 端口: 80 8080 8880 2052 2082 2086 2095 Cloudflare 支持的 HTTPS 端口: 443 2053 20...
解决vuedraggable与页面样式zoom冲突的问题
vuedraggable毫无疑问很好用,在搭建项目的时候,临时接到一个需求,画布中的元素需要进行缩放 然后问题就来了,在缩小到0.6左右的时候,vuedraggable的拖放失灵了 分析后发现是当画布 使用了zoom:0.6这样的样式...
css实现透明网格背景
.transparent{ background-color: #fff; background-image: linear-gradient( 45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc ), ...
一种适合H5屏幕适配方案
一、动态rem适配方案:适合H5项目的适配方案 1. @media媒体查询适配 首先,我们需要设置一个根元素的基准值,这个基准值通常根据视口宽度进行计算。可以在项目的 CSS 文件中,通过媒体查询动态调整根元素的 f...
【动画进阶】CSS 也能实现完美的文字轮播与图片轮播效果
今天,分享一个实际业务中能够用得上的动画技巧。 巧用逐帧动画,配合补间动画实现一个无限循环的轮播效果,像是这样: 看到上述示意图,有同学不禁会发问,这不是个非常简单的位移动画么? 我们来简单分...