华安 - 博客园

神奇的css动画：animation、transform、transition

摘要：前言动画包括两个部分：描述动画的样式和用于指定动画开始、结束以及中间点样式的关键帧。相比较于传统的脚本实现动画技术，使用css动画三个主要优点: 1.能够非常容易创建简单动画，甚至不需要了解JavaScript就能创建动画 2.动画运行效果良好，甚至在低性能的系统上，渲染引擎会使用跳帧或者其他技术阅读全文

posted @ 2025-07-15 09:04 华安阅读(121) 评论(0) 推荐(0)

CSS3超实用的属性: pointer-events(可穿透图层的鼠标事件)

摘要： 1、是什么 pointer-events 直译为指针事件，该属性指定在什么情况下某个DOM可以成为鼠标事件的 target。简而言之，就是允许/禁止DOM的鼠标事件(click事件、hover事件、mouse事件等鼠标事件) 2、具体属性分析用法分析：pointer-events: auto | 阅读全文

posted @ 2025-07-14 10:04 华安阅读(236) 评论(0) 推荐(0)

CSS实现时间轴

摘要： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <tit 阅读全文

posted @ 2025-07-10 14:57 华安阅读(16) 评论(0) 推荐(0)

简单的 CSS二级下拉菜单

摘要：代码01： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 阅读全文

posted @ 2025-07-10 10:14 华安阅读(9) 评论(0) 推荐(0)

一个简易的轮播图效果，可以根据这个来进行完善

摘要： 1 <!doctype html> 2 <html> 3 <head> 4 <style type="text/css"> 5 .container { 6 width: 500px; 7 height: 100px; 8 overflow: hidden; 9 position: relative 阅读全文

posted @ 2025-07-09 10:21 华安阅读(10) 评论(0) 推荐(0)

去除html中多个 div 换行后，有空隙的办法

摘要：例如： 1 <style type="text/css"> 2 .Container01 { 3 width: 600px; 4 background-color: aqua; 5 } 6 7 .ContainerItem01 { 8 width: 20px; 9 height: 20px; 10 阅读全文

posted @ 2025-07-08 09:52 华安阅读(10) 评论(0) 推荐(0)

巧用 clear和after实现页面布局

摘要： 1 <style type="text/css"> 2 .ContainerNew { 3 width: 600px; 4 background-color: blueviolet; 5 } 6 .ContainerNew::after { 7 content: ""; 8 clear: both; 阅读全文

posted @ 2025-07-08 09:38 华安阅读(8) 评论(0) 推荐(0)

vertical-align属性

摘要： 1、vertical-align的定义 CSS 的 vertical-align 属性使用场景：经常用于设置图片或者表单(行内块元素）和文字垂直对齐。官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。 2、vertical-align的语法 vertical- 阅读全文

posted @ 2025-07-08 09:16 华安阅读(32) 评论(0) 推荐(0)

使用 clip-path隐藏掉滚动条

摘要： clip-path: inset() 这里简单介绍一下。inset最多可以传4个参数，分别表示裁剪掉距离上、右、下、左的部分所以，要把滚动条隐藏就很简单了，只需要把下方的裁剪距离设置大于等于滚动条尺寸的值就行了，这里就用10px,譬如在容器的底部设置 : padding: 0px 0px 10px 阅读全文

posted @ 2025-06-16 16:52 华安阅读(12) 评论(0) 推荐(0)

nuxt3中配置 i18n

摘要： 1、将 @nuxtjs/i18n 安装为项目的开发依赖项： npx nuxi@latest module add @nuxtjs/i18n 此处 nuxt的版本与 i18n的版本一定要能匹配正确，否则会在 nuxt.config.ts会报错。错误大致为：对象字面量只能指定已知属性，不在类型'I 阅读全文

posted @ 2025-05-27 17:27 华安阅读(296) 评论(0) 推荐(0)

huaan011