代码收藏
<script setup lang="ts"> import { ref, computed, onMounted } from 'vue' import type { CSSProperties } from 'vue' import { debounce, useEventListener, useMutationObserver } from '../uti
动态烟雾背景效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scal
如何利用浏览器资源提示关键词优化网页性能
浏览器资源提示关键词在现代Web开发中，页面加载速度对用户体验至关重要。浏览器提供了一些资源提示关键词（Resource Hints），帮助开发者优化页面加载速度。这些关键词包括 defer、async、preload、prefetch、dns-prefetch、prerender 和 preconnect。合理利用这些关键词，可以显著提高页面加载性能，优化用户体验。1. defer 和 asyn
三个测试占位图链接地址
官网地址占位图片示例说明https://placeholder.comhttps://via.placeholder.com/400x200.png/3c9cff/fff400x200 - 宽高，3c9cff - 背景颜色，fff - 文本颜色https://dummyimage.comhttps://dummyimage.com/400x200/3c9cff/fff400x200 - 宽高，3c
H5 苹果系统底部安全区
先在头部加上下面的代码<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover" />然后就可以使用以下变量了，直接
Vue3等比例缩放图片组件
今天遇到一个需求，设计需要我无论什么情况都要保持图片比例不变，于是顺手写了个这个组件，组件基于vue3+ts，其实核心代码就是那几句css<template> <div style="position: relative" :style="ratioStr"> <div style="posit
写一套拟物风格的UI组件
准备写一套拟物风格的UI组件，先发篇文章后续慢慢补充吧?大概以后会长这样：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=&
一个简单的数字滚动特效
直接贴代码食用Tips：此代码会读取将页面中所有带counter类名的元素，使用时设置 data-start(起始值) 和 data-end(结束值) 两个自定义属性值即可<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />
pre溢出换行
white-space: pre-wrap; /* 保留空白符序列，并正常进行换行 */ white-space: -moz-pre-wrap; /* 兼容火狐浏览器 */ white-space: -webkit-pre-wrap; /* 兼容谷歌浏览器 */ white-space: -o-pre-wra
当一个元素出现在视口时添加css样式
假设只需要当元素出现在视口，无论出现多少的话，使用 IntersectionObserver 这个API即可满足需求，代码示例如下： // 创建一个 IntersectionObserver 实例 const observer = new IntersectionObserver(entries => { entries.forEach(entry => {