- 动效 文章 模型
-
-
CSS 框尺寸(box-sizing)content-box vs border-box
box-sizing可以用来设置元素框的大小,主要是2种,一种是content-box(纯内容,即元素宽度不包含任何边框和边线),一种是border-box(边框模式,即元素宽度包含边线border和内边距padding的值,注意不包含外边距margin)。
-
GUIDE-H5B2A-CASE-048 弹性布局示例
本例演示一个基本的弹性布局,用以说明弹性布局(Flex Layout)的基本用法和特点。弹性布局也称为弹性框(Flexible Box Layout或Flexbox Layout)布局。
-
SVG 最棒的新年快乐交互式动画 - 用火柴点烟花
里面包含简单的CSS animation如抖动的火柴和城市背景平行视差,也包含复杂的基于GSAP库的Canvas SVG动画绘制。 你可以移动火柴去点燃烟花,当所有烟花的引信被点燃后,将升空绽放。5星级作品。 请在全屏模式(点菜单栏中的双向箭头)下试玩。
-
GUIDE-H5B2A-CASE-047 网格布局示例 - 网格项
本例演示网格项(grid item)在网格容器(display: grid)中的表现。
-
GUIDE-H5B2A-CASE-045 网格布局示例 - 网页游戏应用布局#2命名网格区域
网格的行列以及区域使用命名网格区域(grid-template-areas)属性来直观的定义。 每个字符串是一行(row),每个单词是一个区域(area)。字符串中的单词个数决定了列的数目。注意每个字符串的单词个数(代表列数)必须是相同的。 如果一个区域跨多个列,可以使用重复单词。
-
GUIDE-H5B2A-CASE-041 translate3d() 方法测试
注意父元素中需要设置视角属性 perspective: 500px;,这样才可以激活3d视觉空间。我们也可以使用 transform: perspective(500px);。 transform-style 和 perspective-origin属性是可选的。默认值分别是flat(平面)和 50% 50%。
-
GUIDE-H5B2A-CASE-038 行内框的构造
行内框(inline box)构造的示例。 本例p为块状元素,里面只包含内联元素,因此生成一个IFC,该IFC中包含5个inline box,其中3个为匿名的: Anonymous: "Several" EM: "emphasized words" Anonymous: "appear" STRONG: "in this" Anonymous: "sentence, dear."
-
GUIDE-H5B2A-CASE-037
BFC用途:避免垂直margin合并。 1.同属于一个BFC的块元素垂直margin会发生合并; 2.反之,不同属于一个BFC的块元素垂直margin不会发生合并。
-
GUIDE-H5B2A-CASE-036
BFC用途 - 清除内部浮动 对wrap使用overflow:hidden,将触发创建一个新的BFC,而BFC在计算高度时会把float元素计算在内。其效果就等同于清除了内部浮动。
-
GUIDE-H5B2A-CASE-035 BFC构建自适应两列布局
BFC布局规则演示:构建自适应两列布局。本例中有3个BFC。 1. aside浮动元素生成一个BFC,其左外边缘和wrap的左边缘对齐 2. main元素通过overflow:hidden生成一个BFC,按规则它将不和aside浮动元素发生重叠。(参考阅读:http://www.w3.org/TR/CSS2/visuren.html#bfc-next-to-float) 这样就生成了一个简单的2列布局。
-
GUIDE-H5B2A-CASE-034
CSS进阶教程 - 转换(transition) - 动画转换填充模式(animation-fill-mode)示例。 可以分别修改animation-fill-mode的值为none | forwards | backwards | both来查看区别。 详细讲解在CSS进阶课程中。
© 2024 TechBrood Co. All rights reserved 沪ICP备14011478号