diff --git "a/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241023-css\345\256\232\344\275\215\345\261\236\346\200\247.md" "b/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241023-css\345\256\232\344\275\215\345\261\236\346\200\247.md" new file mode 100644 index 0000000000000000000000000000000000000000..d78e49e599131f8184675eb374bba46ac2ddfed8 --- /dev/null +++ "b/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241023-css\345\256\232\344\275\215\345\261\236\346\200\247.md" @@ -0,0 +1,57 @@ +## css 定位 +- 定位属性指定了元素的定位类型 +- 定位属性的五个值，static , relative , fixed , absolute , sticky +- 元素可以使用的顶部，底部，左侧和右侧属性定位，然而 这些属性无法工作，除非事先设定position属性。他们也有不同的工作方式 这取决于定位方法 +## static 定位 +- html 元素的默认值，即没有定位 遵循正常的文档流对象 +- 静态定位的元素不会收到top，bottom，left，right影响 +- 实例： div.static{ +- position:static; +- border:3px solid #73AD21; +- } +## fixed定位 +- 元素的位置相对于浏览器窗口是固定位置 +- 即使窗口是滚动的他也不会移动 +- 实例：p.pos_fixed{ +- position:fied; +- top:30px; +- right:5px; +- } +## relative 定位 +- 相对定位元素的定位是相对其正常位置 +- 实例：h2.pso{ +- position:relative; +- left;-20px; +- } +## absolute 定位 +- 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素 那么他的位置相对于<html> +- 实例：h2 +- { +- position:absolute; +- left:100px; +- top:150px; +- } +- absolute定位使元素的位置与文档流无关 因此不占据空间。 +- absolute定位的元素和其他元素重叠 +## sticky定位 +- sticky英文字面意思是黏贴 所以可以把它称之为粘性定位 +- position：sticky；基于用户的滚动位置来定位 +- 粘性定位的元素是依赖于用户的滚动，在position:relative与position：fixed定位之间的切换 +他的行为就想 position：relative 而当页面滚动超出目标区域时，他的表现就像position：fixed ； 他会固定在目标位置 +- 实例：div.sticky { +- position: -webkit-sticky; /* Safari */ +- position: sticky; +- top: 0; +- background-color: green; +- border: 2px solid #4CAF50; +- } +## 重叠的元素 +- 元素的定位于文档流无关，所以他们可以覆盖页面上的其他元素 +z-index属性指定了一个元素的堆叠顺序，一个元素可以有正数或附属的堆叠顺序 +- img +- { +- position:absolute; +- left:0px; +- top:0px; +- z-index:-1; +} \ No newline at end of file diff --git "a/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241024-css\345\212\250\347\224\273\350\257\246\350\247\243.md" "b/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241024-css\345\212\250\347\224\273\350\257\246\350\247\243.md" new file mode 100644 index 0000000000000000000000000000000000000000..45f1cb59447474aaf8453566bdbc8c73dcdc4616 --- /dev/null +++ "b/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/20241024-css\345\212\250\347\224\273\350\257\246\350\247\243.md" @@ -0,0 +1,88 @@ +## css动画 +- css3可以创建动画，他可以取代许多网页动画图像，Flash动画和JavaScript实现的效果 +## css3 @keyframes规则 +- 要创建css3动画你需要了解@keyfames规则 +- @keyframes规则是创建动画 +- @keyframes规则内制定一个css样式和动画将逐步从目前的样式更改为新的样式 +- 实例：@keyframes myfirst +- { +- from {background: red;} +- to {background: yellow;} +- } + +- @-webkit-keyframes myfirst /* Safari 与 Chrome */ +- { +- from {background: red;} +- to {background: yellow;} +- } +## css3动画 +- 当在@keyframes创建动画时，把他绑定到一个选择器，否则动画不会有任何效果 +制定至少这两个css3的动画数学绑定向一个选择器 +- 规定动画的名称 +- 规定动画的时长 +- 实例：把“myfirst”动画捆绑到div元素，时长：5秒 +- div +- { +- animation: myfirst 5s; +- -webkit-animation: myfirst 5s; /* Safari 与 Chrome */ +- } +## css动画是什么 +- 动画是使元素从一种样式逐渐变成另一种样式的效果，您可以改变任意多的样式任意多的次数 +- 请用百分比俩规定变化发生的时间 或用关键词 from和 头 等同于0%和100% +- 0%是动画的开始，100%是动画的完成 +- 为了得到最佳的浏览器支持，您应该始终定义0%和100%选择器 +- 实例： 当动画为25%及50%时改变背景色，然后当动画100%完成时再次改变 +- @keyframes myfirst +- { +- 0% {background: red;} +- 25% {background: yellow;} +- 50% {background: blue;} +- 100% {background: green;} +- } + +- @-webkit-keyframes myfirst /* Safari 与 Chrome */ +- { +- 0% {background: red;} +- 25% {background: yellow;} +- 50% {background: blue;} +- 100% {background: green;} +- } +- 实例：改变背景色和位置 +- @keyframes myfirst +- { +- 0% {background: red; left:0px; top:0px;} +- 25% {background: yellow; left:200px; top:0px;} +- 50% {background: blue; left:200px; top:200px;} +- 75% {background: green; left:0px; top:200px;} +- 100% {background: red; left:0px; top:0px;} +- } + +- @-webkit-keyframes myfirst /* Safari 与 Chrome */ +- { +- 0% {background: red; left:0px; top:0px;} +- 25% {background: yellow; left:200px; top:0px;} +- 50% {background: blue; left:200px; top:200px;} +- 75% {background: green; left:0px; top:200px;} +- 100% {background: red; left:0px; top:0px;} +- } +## css的动画属性 +- ![alt text](image-13.png) +- 实例： 运行myfirst动画，设置所有的属性 +- div +- { +- animation-name: myfirst; +- animation-duration: 5s; +- animation-timing-function: linear; +- animation-delay: 2s; +- animation-iteration-count: infinite; +- animation-direction: alternate; +- animation-play-state: running; +- /* Safari 与 Chrome: */ +- -webkit-animation-name: myfirst; +- -webkit-animation-duration: 5s; +- -webkit-animation-timing-function: linear; +- -webkit-animation-delay: 2s; +- -webkit-animation-iteration-count: infinite; +- -webkit-animation-direction: alternate; +- -webkit-animation-play-state: running; +- } \ No newline at end of file diff --git "a/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/image-13.png" "b/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/image-13.png" new file mode 100644 index 0000000000000000000000000000000000000000..7bf6f990378e7def1661ee330ae6957cbbb64d36 Binary files /dev/null and "b/\346\261\237\346\226\207\346\267\257/\347\254\224\350\256\260/image-13.png" differ