企业官网建设流程全解析

江门建设建筑网站,网站建设案例赏析,手机网站如何建立,网站访客qq提取CSS3 技术拓展学习笔记 一、SVG 基础与动画 1. SVG 是什么 SVG#xff08;Scalable Vector Graphics#xff09; 是一种基于 XML 的矢量图形标准#xff0c;由 W3C 制定。 核心特点#xff1a; ✅ 无损缩放#xff1a;放大缩小始终清晰✅ 文件体积小#xff1a;适合网络与…CSS3 技术拓展学习笔记一、SVG 基础与动画1. SVG 是什么SVGScalable Vector Graphics是一种基于 XML 的矢量图形标准由 W3C 制定。核心特点✅无损缩放放大缩小始终清晰✅文件体积小适合网络与高分辨率设备✅可编辑可直接修改 SVG 代码✅可交互支持 CSS / JavaScript 控制✅兼容性好主流浏览器原生支持常用资源Iconfonthttps://www.iconfont.cn/Undrawhttps://undraw.co/2. SVG 组成结构svgSVG 根元素SVG 图标必须包裹在该标签中path路径元素使用d属性定义路径指令常见指令M移动画笔到指定坐标Z闭合路径3.SVG 图标常见CSS属性二、clip-path 裁剪clip-path用于裁剪元素的可视区域可创建复杂几何形状。使元素仅显示被裁剪区域内的部分。clip-path:circle(50% at 50% 50%);clip-path:polygon(0 0,100% 0,100% 80%,0 100%);可视化工具https://tools.jb51.net/static/api/css3path/index.html 使用建议常配合hover/transition移动端注意性能开销三、CSS 滤镜 filterfilter用于当前元素及其子元素本身的实时图像处理无需修改原始素材。滤镜函数作用示例blur()高斯模糊blur(5px)brightness()调整元素亮度1 变暗 1 变亮brightness(150%)contrast()调整元素对比度contrast(200%)saturate()调整背景饱和度saturate(150%)grayscale()将元素转化为灰度图grayscale(100%)hue-rotate()调整元素色相改变颜色倾向hue-rotate(90deg)sepia()将元素转换为深褐色复古效果sepia(70%)drop-shadow()为元素添加投影支持非矩形元素drop-shadow(5px 5px 5px #000)drop-shadow支持非矩形元素比box-shadow更灵活。四、背景滤镜 backdrop-filter毛玻璃效果backdrop-filter用于元素背后的区域背景内容常用于实现毛玻璃、磨砂效果。.glass{background:rgba(255,255,255,0.3);backdrop-filter:blur(10px)saturate(150%);}常用 backdrop-filter 滤镜函数滤镜函数作用说明语法示例blur()高斯模糊blur(5px)brightness()调整背景亮度100% 为原始亮度100% 变暗100% 变亮brightness(150%)contrast()调整背景对比度contrast(200%)saturate()调整背景饱和度0%无色彩100%原饱和100%更高饱和saturate(150%)grayscale()灰度效果0% 原色100% 完全灰度grayscale(100%)hue-rotate()调整背景色相hue-rotate(90deg)sepia()深褐色 / 复古效果sepia(70%)drop-shadow()为背景内容添加投影支持非矩形drop-shadow(5px 5px 5px #669) 注意事项通常与半透明背景配合使用才能实现类似“毛玻璃”的视觉效果处理的是背景内容不是元素自身性能消耗较大避免大面积使用五、CSS 动画时间线 animation-timeline将动画进度绑定到滚动或可视状态。animation-timeline:scroll();//滚动时间线animation-timeline:view();//视图时间线滚动时间线动画随滚动推进视图时间线动画随元素进入/离开视口 常见场景官网滚动动画、视差效果六、CSS 变量Custom Properties:root{--main-color:#f00;}.box{color:var(--main-color);}:root全局变量,全局作用域选择器内部局部变量仅影响该元素及其子元素七、calc() 与计算能力width:calc(100% - 40px);运算符前后必须有空格可以执行数学运算(加减乘除)支持混合单位常与vw / vh / rem搭配使用八、vw / vh 视口单位1vw 视口宽度的 1%1vh 视口高度的 1%section{height:100vh;}适用于全屏布局、响应式设计九、补充知识点1turn 旋转一周 360deg动画优先使用transform / opacity性能更优