良精企业网站系统,杭州seo软件,做网站需要会写代码6,国家商标免费查询入口目录 0、弹性盒子、布局
0.1.弹性盒子的基本概念
0.2.弹性盒子的主轴和交叉轴
0.3.弹性盒子的属性
flex-direction
row
row-reverse
column
column-reverse
flex-wrap
nowrap
wrap
wrap-reverse
flex-dirction和flex-wrap的组合简写模式
justify-content
flex-s…目录 0、弹性盒子、布局
0.1.弹性盒子的基本概念
0.2.弹性盒子的主轴和交叉轴
0.3.弹性盒子的属性
flex-direction
row
row-reverse
column
column-reverse
flex-wrap
nowrap
wrap
wrap-reverse
flex-dirction和flex-wrap的组合简写模式
justify-content
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items
flex-start
flex-end
center
baseline
stretch
align-content
flex-start
flex-end
center
space-between
space-around
stretch
space-evenly
align-self
auto
order
flex-grow
flex-shrink
flex-basis
0.4.弹性盒子的使用场景
一、动画
1.1.动画序列与关键帧
1.2.动画属性详解
1.3.动画简写
1.4.使用动画库
1.5.动画事件
二、CSS3 3D转换
2.1. 3D变换函数
2.2. 3D变换与动画结合
2.3. 3D变换的浏览器兼容性
三、calc函数在动画中的应用 0、弹性盒子、布局 弹性盒子Flex Box是CSS3引入的一种新的布局模式旨在提供一种更有效的方式来布局、对齐和分配在容器中项目的空间即使它们的大小未知或是动态变化的。以下是对弹性盒子的超级详解 0.1.弹性盒子的基本概念
弹性容器Flex Container通过设置display属性的值为flex或inline-flex将一个元素定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。
弹性子元素Flex Items弹性容器的子元素。弹性子元素在弹性容器内按照弹性盒子的规则进行布局。
0.2.弹性盒子的主轴和交叉轴
主轴Main Axis弹性元素排列的主要方向可以是水平方向或垂直方向。该轴的开始和结束被称为main start和main end。
交叉轴Cross Axis垂直于主轴的方向。该轴的开始和结束被称为cross start和cross end。
0.3.弹性盒子的属性
没有添加弹性盒子的属性 htmlheadstyle.box {width: 1000px;height: 1000px;}.b1 {width: 100px;height: 100px;background-color: red;}.b2 {width: 100px;height: 100px;background-color: blue;}.b3 {width: 100px;height: 100px;background-color: green;}.b4 {width: 100px;height: 100px;background-color: yellow;}/style/headbodybodydiv classboxdiv classb11/divdiv classb22/divdiv classb33/divdiv classb44/div/div/body/body
/html
flex-direction
设置弹性子元素的排列方向。
row
row从左到右水平排列默认值。 .box {width: 1000px;height: 1000px;display: flex;flex-direction: row;
}row-reverse
row-reverse从右到左水平排列。 .box {width: 1000px;height: 1000px;display: flex;flex-direction: row-reverse;
}column
column从上到下垂直排列。 .box{width: 1000px;height: 1000px;display: flex;flex-direction: column;}
column-reverse
column-reverse从下到上垂直排列。 .box{width: 1000px;height: 1000px;display: flex;flex-direction: column-reverse;}
flex-wrap
设置弹性子元素是否换行。
nowrap
nowrap不换行默认值。
如果所有子元素的宽/高总值大于父元素的宽/高那么为了子元素不溢出会把内容挤压变形到自适应的宽高。 .box {width: 300px;height: 200px;display: flex;flex-wrap: nowrap;
}
wrap
wrap换行。 .box {width: 300px;height: 200px;display: flex;flex-wrap: nowrap;
}
wrap-reverse
wrap-reverse反向换行。 flex-dirction和flex-wrap的组合简写模式
.box{width: 300px;height: 200px;display: flex;flex-flow: row wrap;
} justify-content
定义弹性子元素在主轴上的对齐方式。
flex-start
flex-start靠主轴起点对齐。 .box{width: 500px;height: 200px;border: 1px solid black;display: flex;justify-content: flex-start;}
flex-end
flex-end靠主轴终点对齐。 .box{width: 500px;height: 200px;display: flex;justify-content: flex-end;border: 1px solid black;
}
center
center居中对齐。 .box{width: 500px;height: 200px;display: flex;justify-content: center;border: 1px solid black;
}
space-between
space-between两端对齐元素之间的间隔相等。 .box{width: 500px;height: 200px;display: flex;justify-content: space-between;border: 1px solid black;
}
space-around
space-around元素两侧的间距相同元素之间的间距比两侧的间距大一倍。 .box{width: 500px;height: 200px;display: flex;justify-content: space-around;border: 1px solid black;
}
space-evenly
space-evenly元素间距离平均分配。 .box{width: 500px;height: 200px;display: flex;justify-content: space-evenly;border: 1px solid black;
}
align-items
定义弹性子元素在交叉轴上的对齐方式适用于单行。
flex-start
flex-start交叉轴起点对齐。 .box{width: 500px;height: 200px;display: flex;align-items: flex-start;border: 1px solid black;
}
flex-end
flex-end交叉轴终点对齐。 .box{width: 500px;height: 200px;display: flex;align-items: flex-end;border: 1px solid black;
}
center
center交叉轴中点对齐。 .box{width: 500px;height: 200px;display: flex;align-items: center;border: 1px solid black;
}
baseline
baseline元素的第一行文字的基线对齐。
改变了每个盒子字体的大小这样看基线比较直观 .box{width: 500px;height: 200px;display: flex;align-items: baseline;border: 1px solid black;
}
stretch
stretch默认值如果元素未设置高度或者为auto将占满整个容器的高度。
红盒子不设置高度容器的填充方向是按照侧轴方向填充的 .box{width: 500px;height: 200px;display: flex;align-items: stretch;border: 1px solid black;
}
align-content
定义多行弹性子元素在交叉轴上的对齐方式适用于多行。
flex-start
flex-start交叉轴的起点对齐。 .box{width: 500px;height: 600px;display: flex;align-content: flex-start;flex-wrap: wrap;border: 1px solid black;
}
flex-end
flex-end交叉轴的终点对齐。 .box{width: 500px;height: 300px;display: flex;align-content: flex-end;flex-wrap: wrap;border: 1px solid black;
}
center
center交叉轴的中点对齐。 .box{width: 500px;height: 300px;display: flex;align-content: center;flex-wrap: wrap;border: 1px solid black;
}
space-between
space-between交叉轴两端对齐之间间隔平分。 .box{width: 500px;height: 300px;display: flex;align-content: space-between;flex-wrap: wrap;border: 1px solid black;
}space-around
space-around元素两侧的间距相同元素之间的间距比两侧的间距大一倍。 .box{width: 500px;height: 300px;display: flex;align-content: space-around;flex-wrap: wrap;border: 1px solid black;
}
stretch
stretch默认值轴线占满整个交叉轴。 .box{width: 500px;height: 300px;display: flex;align-content: stretch;flex-wrap: wrap;border: 1px solid black;
}
space-evenly
space-evenly在交叉轴上平均分配空间。 .box{width: 500px;height: 300px;display: flex;align-content: space-evenly;flex-wrap: wrap;border: 1px solid black;
}
align-self
允许单个弹性子元素有与其他子元素不同的对齐方式可覆盖align-items属性。
auto
auto默认值表示继承父容器的align-items属性。如果没有父元素则等同于stretch
其他值如flex-start、flex-end、center、baseline、stretch与align-items相同。 .box{width: 500px;height: 300px;display: flex;align-items: flex-start;flex-wrap: wrap;border: 1px solid black;
}
/*6号盒子靠底部*/
.b6 {align-self: flex-end;width: 100px;height: 100px;background-color: aquamarine;
}
/*7号盒子单行居中*/
.b7 {align-self: center;width: 100px;height: 100px;background-color: #9317ff;
}
order
order设置弹性子元素的排列顺序数值越小排列越靠前默认为0。 .box{width: 500px;height: 300px;display: flex;align-content: stretch;flex-wrap: wrap;border: 1px solid black;
}.b1 {width: 100px;height: 100px;background-color: red;order: 3;
}.b2 {width: 100px;height: 100px;background-color: blue;order: 1;
}.b3 {width: 100px;height: 100px;background-color: green;order: 0;
}
.b4 {width: 100px;height: 100px;background-color: yellow;order: 2;
}
flex-grow
flex-grow定义弹性子元素的伸展系数默认值为0即如果存在剩余空间也不伸展。 .box{width: 500px;height: 300px;display: flex;align-content: stretch;flex-wrap: wrap;border: 1px solid black;
}.b1 {width: 100px;height: 100px;background-color: red;flex-grow: 3;
}.b2 {width: 100px;height: 100px;background-color: blue;flex-grow: 1;
}.b3 {width: 100px;height: 100px;background-color: green;
}
.b4 {width: 100px;height: 100px;background-color: yellow;
}
flex-shrink
flex-shrink定义了弹性子元素的收缩系数默认值为1即如果空间不足该项目将等比例缩小。
flex-basis
flex-basis定义弹性子元素在主轴上的基础长度默认值auto即项目的本来大小。
该属性可以单独使用也可以与flex-grow和flex-shrink一起使用简写为flex属性如flex: 1 1 auto。
0.4.弹性盒子的使用场景
响应式布局弹性盒子可以根据容器的大小和内容的变化自动调整布局使得页面在不同的屏幕尺寸和设备上都能够适应。
复杂的布局弹性盒子提供了多种对齐和分布元素的方式可以方便地实现复杂的布局。
简化代码与浮动布局相比弹性布局减少了代码量和复杂度提高了可读性和可维护性。
一、动画
1.1.动画序列与关键帧
1.keyframes:
定义动画的关键帧通过指定0%到100%之间的百分比来定义动画的各个阶段
在每个关键帧中可以设置元素的样式属性如位置、大小、颜色等。
/* 创建关键帧动画 动画名字叫one */
keyframes one {/* 从什么到什么 *//* 0% */from {}/* 100% */to {}
}
1.2.动画属性详解
1.animation-name:
指定要应用于元素的动画名称该名称必须与keyframes中定义的动画名称相匹配
2.animation-duration
定义动画的持续时间即动画从开始到结束所需要的时间。
单位可以是秒或毫秒ms
3.animation-timing-function
控制动画的缓冲行为即动画的速度曲线
属性值ease逐渐慢下来、linear匀速、ease-in加速、ease-out减速等还可以使用cubic-bezier函数指定以速度曲线
4.animation-delay
指定动画开始前的延迟时间
单位m或者ms
5.animation-iteration-count: 指定动画应该播放的次数
属性值数字表示播放次数infinite表示无限次播放
6.animation-direction
指定动画的播放方向。 属性值normal正常、reverse反向、alternate奇数次正向播放偶数次反向播放等。 7.animation-fill-mode
定义动画在开始或结束时元素的状态。 属性值none不改变元素状态、forwards动画结束时保持最后一帧的状态、backwards动画开始前保持第一帧的状态等。 8.animation-play-state
控制动画的播放状态。 属性值running播放和paused暂停。 1.3.动画简写
上述动画属性可简写为一个属性 animation: name duration timing-function delay iteration-count direction fill-mode; 1.4.使用动画库
link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css /
link relstylesheet href./iconfont.css
styleh1 {animation-iteration-count: infinite;}
/style
h1 classanimate__animated animate_bounce我是动画库/h1
!-- animate_ _animated基础类名--
!-- animate_bounce动画效果--
1.5.动画事件 使用JavaScript可以监听动画的开始animationstart、结束animationend、迭代animationiteration等事件。 例
html文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleAnimation Events/titlestyle.animated-box {width: 100px;height: 100px;background-color: red;position: relative;animation: moveBox 2s infinite;}keyframes moveBox {0% { left: 0; }50% { left: 200px; }100% { left: 0; }}/style
/head
bodydiv classanimated-box idbox/divscript srcscript.js/script
/body
/html
js文件
// 获取动画元素
const box document.getElementById(box);// 监听动画开始事件
box.addEventListener(animationstart, function(event) {console.log(Animation started:, event.animationName);// 可以在这里添加额外的逻辑比如改变背景颜色box.style.backgroundColor blue;
});// 监听动画结束事件
box.addEventListener(animationend, function(event) {console.log(Animation ended:, event.animationName);// 可以在这里添加额外的逻辑比如重置背景颜色box.style.backgroundColor red;
});// 监听动画迭代事件
box.addEventListener(animationiteration, function(event) {console.log(Animation iterated:, event.animationName, Iteration count:, event.iterationCount);// 可以在这里添加额外的逻辑比如改变透明度box.style.opacity 0.5;// 可以设置一个延时来恢复透明度避免一直半透明setTimeout(() {box.style.opacity 1;}, 100); // 延时100毫秒
});
二、CSS3 3D转换 CSS3的3D转换属性允许开发者对网页元素进行3D空间中的移动、旋转、缩放等操作。 2.1. 3D变换函数
translate3d(tx, ty, tz)在3D空间中移动元素。
rotate3d(x, y, z, angle)围绕3D空间中的某个轴旋转元素。
scale3d(sx, sy, sz)在3D空间中缩放元素。
perspective(d)为3D元素添加透视效果使元素看起来更加立体。通常应用于父元素。
transform-style控制子元素是否开启三维立体环境如flat默认不开启3D立体空间、preserve-3d开启3D立体空间。
2.2. 3D变换与动画结合
可以将3D变换与动画属性结合使用创建复杂的3D动画效果。
例如使用rotate3d和animation属性创建一个旋转的3D立方体。
!DOCTYPE html
html langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
title3D Cube Animation/title
stylebody {margin: 0;perspective: 1000px; /* 为整个场景添加透视效果 */display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;}.scene {width: 200px;height: 200px;position: relative;transform-style: preserve-3d; /* 开启3D立体空间 */animation: rotateCube 5s infinite linear; /* 应用旋转动画 */}.cube {width: 100%;height: 100%;position: absolute;transform-style: preserve-3d; /* 开启3D立体空间 */}.face {position: absolute;width: 200px;height: 200px;background: rgba(255, 255, 255, 0.9);border: 1px solid #ccc;box-sizing: border-box;font-size: 20px;font-weight: bold;color: #333;text-align: center;line-height: 200px;user-select: none; /* 禁止用户选择文本 */}.front { transform: translateZ(100px); } /* 前面 */.back { transform: rotateY(180deg) translateZ(100px); } /* 后面 */.right { transform: rotateY(90deg) translateZ(100px); } /* 右面 */.left { transform: rotateY(-90deg) translateZ(100px); } /* 左面 */.top { transform: rotateX(90deg) translateZ(100px); } /* 上面 */.bottom { transform: rotateX(-90deg) translateZ(100px); } /* 下面 */keyframes rotateCube {from { transform: rotateX(0deg) rotateY(0deg); } /* 动画开始时的状态 */to { transform: rotateX(360deg) rotateY(360deg); } /* 动画结束时的状态 */}
/style
/head
body
div classscenediv classcubediv classface frontFront/divdiv classface backBack/divdiv classface rightRight/divdiv classface leftLeft/divdiv classface topTop/divdiv classface bottomBottom/div/div
/div
/body
/html 2.3. 3D变换的浏览器兼容性 大多数现代浏览器都支持CSS3的3D变换但为了确保兼容性最好检查并测试在不同浏览器上的表现。
解决方案 1.使用css前缀 可以针对不同浏览器添加相应的CSS前缀例如-moz-、-ms-、-webkit-等。 2.使用JavaScript库 可以使用一些JavaScript库如Three.js、Babylon.js等来实现跨浏览器的3D变换效果。
这些库封装了底层的浏览器兼容性处理简化了开发过程并提供了丰富的3D图形功能。 3.检测浏览器支持 通过JavaScript代码检测浏览器是否支持CSS3的3D变换属性。 如果浏览器不支持3D变换则提供替代方案或降级处理以确保用户体验的连续性。 4.考虑使用其他技术 如果3D变换效果在特定浏览器中无法实现开发者可以考虑使用其他技术来实现相似的效果。 例如可以使用SVG、Canvas等技术来绘制和渲染3D图形。
三、calc函数在动画中的应用 calc()函数允许开发者在CSS中执行一些计算以动态地设置元素的属性。在动画中calc()函数可以用于计算元素的位移、大小等属性从而创建更复杂的动画效果。 1、基本用法
calc()函数支持四则运算和混合单位如百分比、px、em等。
在使用calc()函数时需要注意运算符两侧的空格要求。
2、在动画中的应用
可以使用calc()函数来计算元素的位移量以实现更平滑的动画过渡效果。
例如可以使用calc(50% - 50px)来设置一个元素相对于其父元素宽度的一半再减去50px的位置。 注意- * / 四种运算的运算符两边必须有空格不然不执行 感恩家人们点点赞
