2020-0725-[景水]复习浮动-1907
公开笔记对他人可见,有机会被管理员评为“优质笔记”
{{ noteEditor.content.length }}/2000
JSON字符串转成对象和ajax请求
讲解了使用正则表达式对字符串进行操作的多种方法。涉及匹配、布尔返回值、替换和拆分等功能。提到了如何根据正则表达式匹配字符串的不同函数(match, test, replace, split)以及每个函数返回的数据类型。介绍了正则表达式中字符集、量词、定位符的使用及如何通过模式修正符实现不同的匹配要求。特别说明了如何利用括号捕获匹配内容。适合想要掌握字符串处理和提高正则表达式使用技巧的开发者和程序员。
12:2817402020-0707-[景水]Vue-列表渲染和练习
本视频介绍了在Vue框架中的各种核心概念和功能实现,包括计算属性的设定与获取、如何定义和使用方法和函数、类样式的绑定条件、条件渲染与页面元素的显示隐藏控制、事件处理函数的编写位置、数据双向绑定的运用、以及如何获取表单输入内容。针对如何给标签属性绑定数据提供了清晰的讲解,并探讨了属性变化的监视与鼠标事件的绑定。该内容适合希望掌握Vue前端开发技术的开发者。
05:501702【水哥澎湃】CSS实现-切角六边形
本次教学视频详细讲解了如何使用CSS技术创建一个切角效果的六边形。视频展示了基于HTML和CSS的步骤,包括设置尺寸、背景颜色渐变,以及利用线性渐变的技术来实现六边形的切角效果。接着,讲解了如何通过调整各个角的颜色分布和位置来精确实现六边形的效果,并探讨了使用裁剪路径的另一种方式。内容主要适合需要进行网页设计和样式实现的前端开发者、CSS爱好者、视觉设计人员和学习CSS3新特性的编程新手。
10:471696一分钟教你做出水波纹涟漪效果
通过 CSS 技术制作页面动态效果,如本例中的水波纹效果,展示了使用 DIV 元素及类选择器构建页面基础结构的方法。介绍了如何通过设置相对定位和绝对定位使元素居中显示,以及如何定义动画关键帧和应用 transition 属性来实现动画效果。演示了调整 opacity 属性来控制透明度,完成水波纹由中心向外扩散消散的视觉效果,并介绍了设置动画延时以实现连续动态效果。内容适合前端开发者、UI设计师、网页设计爱好者、动画效果制作人员、CSS学习者。
01:205.1万2023新CSS特性(上)
随着2023年新的CSS特性发布,前端界迎来了创新的布局与设计能力,这些更新将允许开发者以更精细的控制和更高的效率设计网页。比如,改进的网格布局和对响应式设计的增强支持使得创建适应不同设备的页面变得更为简便。新增的CSS变量和动画效果则为用户界面带来更丰富的视觉体验。新特性还包括对现代浏览器功能的支持,提升了网页的性能和兼容性。这些内容特别适合那些希望保持最新行业知识,以及想要提升网页设计能力和用户体验的前端开发者学习。
01:272.9万2个新单位教你搞定内容图片尺寸居中
视频通过两个CSS新单位vmin和vmax简化了内容图片在不同设备屏幕上的最大尺寸调整和居中问题。vmin基于视口宽度和高度中的较小值,而vmax则取较大值,这两个单位让开发者能够更灵活地进行响应式设计,尤其是在处理移动端的横屏与竖屏切换时。这些单位确保内容在各种尺寸的屏幕上都能正常显示,有助于提升用户体验。介绍的技术易于理解,横屏与竖屏适配的实用技巧适宜前端开发者和移动端设计师。
00:391.9万两分钟带你做出按钮的光晕效果
视频介绍了如何使用HTML和CSS结合JavaScript实现一个酷炫的按钮光晕效果。首先,通过在HTML中添加按钮并设置文本,接下来在CSS中通过相对与绝对定位配合transform属性,让光晕背景圆形居中。文字通过轻微定位覆盖在光晕之上。通过设置宽度和高度并与transition属性搭配,实现动态的过渡效果,使得光晕在鼠标悬停时平滑展现。JavaScript用于计算鼠标相对按钮的位置,并动态更新背景的位置,让光晕在鼠标周围移动。此技术适合前端开发者、UI/UX设计师、网站制作爱好者、JavaScript学习者以及对CSS动画感兴趣的人群。
02:053.9万一分钟教你做出文字触碰过渡下划效果
本视频展示了如何使用CSS为文字添加具有动态交互效果的背景。操作中首先设置了文本的行高来优化布局,随后引入了一个不重复的背景,并调整其位置至底部。为了实现过渡效果,进一步定义了背景的宽度和高度,使其在鼠标悬停时展开到全宽,鼠标移出时收缩。通过调整background-position在悬停和常态下的x位置,达到了背景位置动态变化的效果。此技术适合前端开发人员和UI设计师,帮助他们丰富网站界面的视觉体验和用户交互。
00:592.8万







