等比例缩放图片组件
今天遇到一个需求，设计需要我无论什么情况都要保持图片比例不变，于是顺手写了个这个组件，组件基于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 => {
下拉菜单点击展开点击其他地方关闭
<style> /* 下拉菜单按钮样式 */ .dropbtn { background-color: #ffffff; color: #333333; padding: 10px; font-size: 16px; border: none; cursor: pointer; } /* 下拉菜单容器样式（隐藏） */
前端项目中的拖拽排序实现
在前端项目中，拖拽排序是一个常见的需求。本文将详细讲解如何实现拖拽排序。实现步骤首先，需要给每个可拖拽的元素添加一个 draggable 属性，值为 true，表示该元素可以被拖拽。接着，需要监听每个可拖拽元素的 dragstart 事件，该事件在拖拽开始时触发。在该事件的回调函数中，需要设置拖拽数据，可以使用 event.dataTransfer.setData() 方法。然后，需要监听每个可拖
CSS实现平滑滚动
什么是平滑滚动？平滑滚动是指当用户点击页面内的链接时，页面会平滑地滚动到目标位置，而不是瞬间跳转。如何实现平滑滚动？实现平滑滚动的关键是使用CSS属性scroll-behavior。将scroll-behavior设置为smooth即可实现平滑滚动。scroll-behavior: smooth;
vue项目scss配置全局变量
// vue.config.js const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, css: { loaderOptions: { sass: {
css3动画运行结束保持结束状态
animation-fill-mode: forwards;