前端 CSS 经典
常用 css 基础知识点总结
yqcoder
承接项目:H5、Web 端、后台管理系统、微信小程序。fire!!!!!!!
展开
-
前端 CSS 经典:SVG 描边动画
实现原理:将 stroke-dasharray 和 stroke-dashoffset 设置为。stroke-dasharray:将描边线变成虚线、其中实线和虚线部分的长度就是它的值。使用 css 中的 stroke 属性,用来描述描边的样式,其中重要的属性。stroke-dashoffset:描边线的偏移量。方法可以获取 path 的长度。设置动画,将描边线的偏移量。理解了这两个属性的原理,才能理解描边动画实现的原理。svg 中 path 的长度,这样初始状态就是。,其中变化的过程就是描边动画。原创 2024-05-18 23:00:17 · 172 阅读 · 0 评论 -
前端 CSS 经典:好看的文字阴影
给文字添加好看的阴影。原创 2024-05-18 08:52:18 · 153 阅读 · 0 评论 -
前端 CSS 经典:模特换装效果
通过使用。原创 2024-05-17 10:11:58 · 219 阅读 · 0 评论 -
前端 CSS 经典:filter 滤镜
什么叫滤镜呢,就是把元素里的。原创 2024-05-17 10:08:56 · 358 阅读 · 0 评论 -
前端 CSS 经典:弧形边框选项卡
准备一个元素,将元素左上角,右上角设为圆角。然后要在左右两边拼接弧形,我们可以写两个伪元素那怎么将这两个元素做成弧形呢,可以使用渐变。这下我们有了弧形,那怎么做成效果图的样式呢,最后我们可以使用旋转。原创 2024-05-16 14:33:11 · 192 阅读 · 0 评论 -
前端 CSS 经典:CSS 包含块
CSS 总的来说就两块,样式计算和视觉格式化模型,而包含块就是视觉格式化模型的重要内容,理解包含块的定义,对于 CSS 布局有更好的帮助。原创 2024-05-12 09:11:30 · 191 阅读 · 0 评论 -
前端 CSS 经典:grid 栅格布局
【代码】前端 CSS 经典:grid 栅格布局。原创 2024-03-27 17:02:38 · 1017 阅读 · 0 评论 -
前端 CSS 经典:省略号
单行省略,双行省略,通用省略原创 2023-11-20 09:15:22 · 434 阅读 · 0 评论 -
前端 CSS 经典:clip、clip-path
shape 基础形状:inset 矩形,circle 圆,ellipse 椭圆,polygon 多边形。2.top,right,bottom,left 都是相对于元素的左上角。2.top,right,bottom,left 相对于元素的各边界。1.裁剪只对 fixed 和 absolute 的元素有效。1.裁剪只对 fixed 和 absolute 的元素有效。source SVG 绘制图形: path。inherit:继承父级 clip 属性。rect:规则四边形裁剪。auto:默认,不裁剪。原创 2023-10-21 14:35:43 · 469 阅读 · 0 评论 -
前端 CSS 经典:box-shadow
boxShadow 可以用逗号分割多个阴影设置,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。h-shadow: 必填,水平阴影的位置,允许负值。v-shadow: 必填,垂直阴影的位置,允许负值。inset: 可选,设置后为内侧阴影。spread: 可选,阴影大小。color: 可选,阴影颜色。blur: 可选,模糊程度。原创 2023-10-21 10:23:21 · 383 阅读 · 0 评论 -
前端 css 经典:transition 过渡和 animation 动画
* 定义动画 */0% {100% {/* or */from {to {/* 使用动画 */div {/* 简写 *//* animation:动画名称 动画时长(有这两个即可以完成动画,其它未设置,有默认值) *//* animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画 *//* 详写 *//* 动画名称 *//* 持续时间 *//* 运动曲线 和 transition 的运动曲线一样 *//* 何时开始 */原创 2023-06-28 14:32:39 · 889 阅读 · 0 评论 -
前端 css 经典:盒模型
如果子元素设置了外边距,在没有把父元素变成BFC的情况下,父元素也会产生外边距,给父元素添加 overflow:hidden 这样父元素就变为 BFC,不会随子元素产生外边距,但是父元素的高。内容 width = css 属性 width - 2 * padding - 2 * border - 2 * margin。盒子实际所占页面宽为 内容width + 2 * padding + 2 * border + 2 * margin。内容 width = css 属性 width 的大小。原创 2023-06-12 17:37:17 · 44 阅读 · 0 评论 -
前端 CSS 经典:清除浮动
【代码】前端 CSS 经典:清除浮动。原创 2023-06-13 16:02:35 · 39 阅读 · 0 评论