CSS(3)"/>
CSS(3)
目录
浮动的特点
高度塌陷和BFC
clear
clearfix
高度塌陷的最终方案
position
相对定位
绝对定位
固定定位
元素的层级
字体族
图标文字简介
图标文字的其他属性
阿里巴巴矢量图标库
行高
字体
字体的简写属性
文本的水平和垂直对齐
其他文本样式
背景1
背景2
径向渐变
线性渐变
雪碧图
表格
长表格
表格的样式
表单
表单的补充
animation
动画
关键帧
变形平移
Z轴平移
旋转
缩放
浮动的特点
脱离文档流的特点：块元素
1块元素不在独占一行2宽和高会随内容增加而增加
行内元素：脱离文档流后与块元素特点一样。
总结，脱离文档流后不再分块元素和行内元素
高度塌陷和BFC
<head><style>.box1{border: 10px red solid;/* float: left; *//* display: inline-block; */overflow: hidden;}
.box2{width: 200px;height: 200px;background-color:red;float: left;}</style>
</head>
<body><div class="box1"> <div class="box2"></div></div>
</body>高度塌陷：父元素的高度默认是被子元素所撑开的，当子元素设置为浮动时
会导致父元素的高度丢失：此时其下的元素会往上移动，所以我们得用BFC
BFC（Block Formatting Context)块级格式化环境
BFC是一个CSS中的隐含属性，可以为一个元素开启BFC
特点：1不会被浮动元素所覆盖(俩个float)2子元素与父元素外边距不会重叠
3可以包含浮动的子元素
开启BFC的方式：1设置元素浮动(不推荐)
2设置为行内元素(不推荐)
3将元素的overflow设置为一个非visible的值
常用方法：hidden
设置了BCF父元素不会被往下带
<style>.box3{width: 200px;height: 200px;background-color: yellow;overflow: hidden;}
.box4{width: 100px;height: 100px;background-color: red;margin-top: 100px;}</style>
</head>
<body><div class="box3"><div class="box4"></div></div>clear
float会使box.3上移；而clear的作用是清除浮动元素对当前元素的影响
left 清除左侧浮动元素对当前元素产生的影响
right 清除右侧的
both 清除两侧中最大影响的那侧
<style>.box1{width: 200px;height: 200px;background-color: red;float: left;}.box3{width: 200px;height: 200px;background-color: yellow;clear: both;}.box2{width: 300px;height: 300px;background-color: #bfa;float: right;}
</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div>
</body>clearfix
来解决高度塌陷和外边距重叠的问题
<style>.box1{width: 200px;height: 200px;background-color: #bfa;}.box2{width: 100px;height: 100px;background-color: red;margin-top: 100px;}.clearfix::before,.clearfix::after{content: '';display: table;clear: both;}</style>
</head>
<body><div class="box1 clearfix"><div class="box2"></div></div>高度塌陷的最终方案
<style>.outer{border:red 10px solid;}.inner{width: 300px;height: 300px;background-color: red;float: left;}.outer::after{content:'';display: block;clear: both;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>相当于在outer最后添加一个子元素，这个子元素必须变成块元素
并且清除向左的样式
after伪元素来解决高度塌陷
position
定位(position)是一种更加高级的布局手段，可以将元素摆放到任意位置，通过position来实现定位
可选值：static 默认值，元素静止的没有开启定位；relative 相对定位；absolute 绝对定位；fixed 固定地位；sticky 粘滞定位
相对定位
特点：1开启定位是不设置偏移量，元素不会发生变化2相对定位是参照于元素在文档里中的位置3相对定位会提升元素的级别(会覆盖其他元素)4相对定位不会脱离文档流(下面的元素不会以上来)5不会改变元素的性质，块是块，行内是行内
偏移量：top bottom设置垂直方向的位置，只用设置一个。定位元素和定位位置上边的距离
left right设置水平方向的位置，只用设置一个
<style>div{font-size: 18px;}.box1{width: 100px;height: 100px;background-color: red;}.box2{width: 100px;height: 100px;background-color: rgb(40, 193, 20);
position: relative; left: 50px;top: -50px;}.box3{width: 100px;height: 100px;background-color: rgb(32, 83, 172);}
</style>
</head>
<body><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div>
</body>绝对定位
绝对定位的特点：
1 开启后，如果不设置偏移量则位置不会有变化2 开启后，元素会从文档流中脱离(其他元素会移到元素下面)
3 绝对定位会改变元素性质，块元素变成行内元素，宽高有内容撑开 4绝对定位会使元素级别上升(覆盖其他元素)
5 绝对定位元素是相对于其包含块进行的
绝对定位的包含块：包含块就是离他最近的开启了定位的祖先元素；如果所有元素都没有开启定位则是根元素html(初始包含块)
<style>div{font-size: 18px;}.box1{width: 100px;height: 100px;background-color: red;}.box2{width: 100px;height: 100px;background-color: grend;position: absolute;left: 0px;top: 0px;}.box3{width: 200px;height: 200px;background-color: blue;}.box4{width: 300px;height: 300px;background-color: black;position: relative;}</style>
</head>
<body><div class="box1">1</div><div class="box4"><div class="box5"> <div class="box2">2</div></div></div><div class="box3">3</div>
</body> 水平布局必须满足：left+margin-left+border-left+padding-left+width+3个值+right=包含块元素的宽度
如果9个值中没有auto,则自动调right；如果有一个值就调那一个;如果有两个值，平均分配
可设置auto的值：margin width left right
垂直方向布局必须满足：left+margin-top/bottom+boreder-top/bottom+padding-top/bottom=包含块元素的长度
满足条件和上方一样
<style>.box1{width: 500px;height: 500px;background-color: #bfa;position: relative;}.box2{width: 100px;height: 100px;background-color: red;position: absolute;margin: auto;left: 0px;right: 0px;top: 0px;bottom: 0px;}</style>
</head>
<body><div class="box1"> <div class="box2"></div></div>
</body>设置垂直水平位置(利用定位)
两个元素都开启了定位(不管什么定位),设置left，right，top，bottom都设置为0px,margin为auto
固定定位
固定定位：也是一种绝对定位，大部分特点和绝对定位一样；不同的是固定定位永远参照与浏览器的视口进行定位；固定定位不会随滚动条移动而移动
<style>div{font-size: 18px;}.box1{width: 100px;height: 1000px;background-color: red;}.box2{width: 100px;height: 100px;background-color:organ;position: fixed;left: 0px;top: 0px;}.outer{width: 300px;height: 300px;background-color: tomato;}.inner{width: 200px;height: 200px;background-color: pink;}</style>
</head>
<body><div class="box1">1</div><div class="outer"><div class="inner"><div class="box2">2</div></div></div>
</body>元素的层级
开启定位元素，可以通过z-index属性来设置元素层级，设置越大，就在越在上面。如果层级一样，靠下的元素先显示。
祖先的元素层级在高也盖不住后代元素
<style>.box1{width: 100px;height: 100px;background-color: red;position: relative;left: 0px;top: 0px;/* z-index: 1; */}.box2{width: 100px;height: 100px;background-color: argb(40, 193, 20,.4);position: absolute;left: 0px;top: 0px;}.box3{width: 100px;height: 100px;background-color: rgb(32, 83, 172);position: absolute;left: 0px;top: 0px;left: 0px;z-index: 2;}.box4{width: 100px;height: 140px;background-color: pink;}</style>
</head>
<body><div class="box1">1</div><div class="box2">2</div><div class="box3"><div class="box4">4</div></div>粘滞定位不常用
字体族
图标文字简介
图标文字：在网页中经常用到图标
下载地址：/;之后将css,webfonts移入相应文件夹中
link引入all.css。使用图标时，属性名就两个(fas fab)用版权的图标
<link rel="stylesheet" href="./fa/css/all.css">
</head>
<body><i class="fas fa-bell" style="font-size: 56px;color: orange;"></i><i class="fab fa-accessible-icon" style="color: antiquewhite;font-size: 66px;">
</i>
</body>图标文字的其他属性
通过伪元素来设置图标字体
1.找到要设置图标的元素通过before或after选中2.在content中设置字体的编码3.设置字体的样式(fab与fas不一样) -->
<style>li{list-style: none;}(将无序列表样式清除)li::before{content:'\f1b0';font-family: 'Font Awesome 6 Free';font-weight: 900; /* font-family: 'Font Awesome 5 Brands'; fab*/color: blue;margin: 10px; }</style>
</head>
<body><ul><li>哈哈</li><li>很爱很爱你</li><li>好爱好爱你</li><li>好啊好啊</li></ul><!-- 通过实体来使用图标字体；&#x图标的编码;(有分号)不要忘了添加fas或fab--><span class="fas"></span>
</body>阿里巴巴矢量图标库
注意并不是所有的图标都版权清晰的，做前端时需向作者问清楚
步骤：1选择单色图标库加入购物车选到自己创建的文件夹(多色可以用图片)2点击下载至本地，保存到桌面上3下载文件中有网页文件，里面有图标的编码和font class4引入iconfont.css文件
<link rel="stylesheet" href="./fa/iconfont.css">
<style>i.iconfont{font-size: 50px;}
</style>
</head>
<body><i class="iconfont"></i><i class="iconfont"></i><i class="iconfont icon-a-huaban2fuben20"></i>行高
行高：可以直接指定一个大小(px em);也可以指定一个整数，整数将会是字体的指定倍数
行高会在字体上下平均分配
如果是多行文字，行间距=行高-字体大小(160px)
<style>div{font-size: 40px;border: 10px red solid;line-height: 200px;height: 200px;/* 行高如果和高度一样，单行文字会在元素中垂直居中 */ }</style>
</head>
<body><div>今天天气不错，hollow word</div>
</body>字体
字体相关样式：font-size字体大小与font-size相关的单位；一个em相当于元素一个font-size，rem相当于根元素的一个font-size
font-family字体族(字体的样式)可选值：serif 衬线字体；sans-serif 非衬线字体；monospace 等宽字体
指定字体的类别，浏览器会自动用该类别下的字体；可以指定多个字体，从头到尾谁能用谁用
<style>p{font-size: 19px;font-family: 'Courier New', Courier, monospace;}/*@font-face 指定字体样式直接供用户使用 需指定样式名字与路径；问题：1加载速度2版权3字体格式(ttf)*/@font-face {font-family:'my font';/*名字随便*/src: url();/*本地的路径*/}
</style>
</head>
<body><p>今天天气真好，You are handsome!</p>
</body>字体的简写属性
<style>div{border: 1px red solid;/* font简写属性：font:字体大小/行高 字体族；行高可以省略不写，如果不写使用默认值；也可以在后面加上行高*/font: 50px/2 'Courier New', Courier, monospace;/* line-height: 100px; */font-weight: bold;/* 字体的加粗，可选值；normal(默认值 不加粗) bold(加粗) 100-900九个逐渐加粗级别(没啥用)字体风格，normal(正常的) italic(斜体);也可加在font简写中，不写就会被正常值所覆盖掉 *//* font-weight: bold;font-style: italic;*//* font: bold italic 50px/2 monospace; */}</style>
</head>
<body><div>我是div块元素今天天气不错</div>文本的水平和垂直对齐
<style>p{ border: 1px red solid;text-align: justify;/* 文字的水平对齐 可选值：left(左侧对齐) right center(居中对齐) justify(两端对齐) */}div{font-size: 30px;border: 1px red solid;}span{ font-size: 20px;border: 1px black solid;/* vertical-align 设置元素垂直对齐 可选值：baseline 默认值基线对齐;top 顶部对齐(子元素顶部与父元素顶部对齐);bottom 底部对齐;middle 居中对齐 */vertical-align: top;}img{ border: 1px red solid;vertical-align: bottom;/* 图片加了不是默认值(baseline)会将边框充满 */}</style>
</head>
<body>
<p>ahdhofhoshdnfoiwehiohiohfoidhsnanlndlfnoaahdhofhoshdnfoiwehiohiohfoidhsnanlndlfnoaahdhofhoshdnfoiwehiohiohfoidhsnanlndlfnoa</p><div>今天天气真好，今天very<span>天气</span>真好</div><img src="../练习/1.webp" alt="">
</body>其他文本样式
<style>.box1{text-decoration: underline red dotted;font-size: 30px;/* 设置文本修饰;可选值；none 什么都没有；underline 下划线；line-through 删除线；overline 上划线ie浏览器不支持有颜色的线条 */}.box2{width: 200px;overflow: hidden;text-overflow: ellipsis;/* 设置省略符号 */white-space: nowrap;/* white-space设置网页如何处理空白 可选值：normal 正常;nowrap 不换行;pre 保留空白 *//* 四个值缺一不可，可以设置京东页面带有省略块的小页面 */}</style>
</head>
<body><div class="box1">今天天气真不错</div><div class="box2">dkbfbdabiueieufnnoennoqnfondkbfbdabiueieufnnoennoqnfondkbfbdabiueieufnnoennoqnfondkbfbdabiueieufnnoennoqnfon</div>
</body>背景1
<style>.box1{width: 500px;height: 500px;background-color: #bfa;background-image: url(../练习/1.webp);/* background-image设置背景图片，可以同时设置背景颜色和图片;如果颜色大于图片，则图片平铺满，颜色小于图片，则截取图片如果一样大，则正常显示 */background-repeat: no-repeat;/* 可选值；repeat默认值，背景会沿x轴和y轴双方向重复;repeat-x；沿着x轴方向重复;no-repeat；背景图片不重复 *//* background-position: left; *//* 设置图片位置，可选值，left right center bottom top；必须指定两个方位，如果只写一个默认第二个是center;也可用偏移量来指定位置；水平方向的偏移量 垂直方向的偏移量 */background-position: 250px 0px;}</style>
</head>
<body><div class="box1"></div>
</body>背景2
<style>
.box1{width: 500px;height: 500px;background-color: #bfa;background-image: url(lmq.jpg);background-repeat: no-repeat;background-position: left;border: 10px double red;/* 背景的范围 background-clip ；borde-box默认值，背景会出现在边框下边；padding-box 出现在内容区和内边距 content-box 只出现在内容区 background-origin 背景图片的偏移量计算的原点；padding-box 默认值，从内边距处开始计算；content-box 背景图片的偏移量从内容区处计算 border-box 从边框处开始计算*/background-clip:border-box;/* background-origin: border-box; *//* background-size:设置背景图片大小，第一个值宽度，第二值高度；如果只写一个，则第二 个默认是auto； cover 图片的比例不变，将像素铺满;contain 比例不变，元素完整显示 *//* background-size: cover; */}.box2{height: 1000px;background-image: url(1.webp);background-repeat: no-repeat;background-position: 100px 100px;background-attachment: fixed;/* 背景图片是否跟随元素移动 可选值；scroll默认值 会随元素移动fixed 固定在页面中 文字不变 */}/* 简写属性(背景相关属性) 没有顺序要求；position+size，必须用/隔开origin要在clip必须在先 */</style>
</head>
<body><div class="box1"><div class="box2">asdnjfnajnneunfnejngonoan</div></div>
</body>鼠标移入后滚动滑轮，图片会在网页窗口钉住
径向渐变
<style>.box{width: 300px;height: 300px;background-image: radial-gradient(100px 500px at top,red,#bfa);/* 第一个值是水平方向渐变的距离，第二个是垂直方向 *//* 径向渐变radial-gradient();默认情况下径向渐变形状根据元素的形状来计算正方形————圆形；长方形————椭圆形语法：radical-gradient(大小 at 位置，颜色 位置，颜色 位置)大小：circle(圆形) ellipse(椭圆)closest-side closest-corner farthest-side farthest-corner位置；top right left center bottom *//* background-image: radial-gradient(closest-side at 10px 10px,red,orange); */ }</style>
</head>
<body><div class="box"></div>
</body>线性渐变
<style>.box{width: 200px;height: 200px;background-image: linear-gradient(to bottom,red,orange);/* linear-gradient(线性渐变 颜色沿一条直线发生变化)以红色开头，橙色结尾。可选值；to left(top bottom right) xxxdeg表示度数 turn表示圈 后面都要加逗号也可手动指定渐变分布情况(在颜色后面输入59px) *//* background-image: repeating-linear-gradient(red 10px,orange 55px); *//* 线性渐变只能两个值 */}</style>
</head>
<body><div class="box"></div>
</body>雪碧图
雪碧图：有效避免浏览器加载出现闪烁问题，此技术十分广泛，称为CSS-Sprite(雪碧图)
先前的width，height是目标图的宽高，而backgroup中的是目标图里边框的距离，宽高
<style>.box1{width: 75px;height: 75px;background: url(./4.jpg) -73px -47px;}/*background中前一个数是目标图距左边距的距离(左边,上边加负号)*/</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>表格
简介：
创建表格 tr表示单元格中的行，td表示单元格中的列
rowspan 纵向合并单元格 colspan 横向合并单元格
<body><table border="1" width="50%" align="center"><tr><td>A1</td><td>B1</td><!-- 合并时还需把想要合并的单元格删掉 --><td colspan="2">D2</td></tr><tr><td>1</td><td>2</td><td>3</td><td rowspan="2">4</td><!-- 纵向合并也得删掉，不然多出来一个单元格 --></tr><tr><td>1</td><td>2</td><td>3</td></tr></table>
</body>
长表格
可以将表格分为三个部分
头部thead；主体tbody； 底部tfoot th表示头部的单元格(加粗居中)
<body><table border="1px" width="50%" align="center"><thead><tr><th>日期</th><th>收入</th><th>支出</th><th>总计</th></tr></thead><tbody><tr><td>日期</td><td>收入</td><td>支出</td><td>总计</td></tr><tr><td>2001.9.9</td><td>1000</td><td>100</td><td>900</td></tr><tr><td>2022.7.8</td><td>5000</td><td>1000</td><td>4000</td></tr></tbody><tfoot><tr><td></td><td></td><td>合计</td><td>900</td></tr></tfoot></table>
</body>
表格的样式
<style>table{width: 50%;border: 1px red solid;margin: 0 auto;border-collapse: collapse;/* 设置内框线，将线合并 */border-spacing: 0px;/* 指定边框的距离，设置collapse就不用设置这个 */}td{border: 1px red solid;height: 100px;/* 默认情况下是垂直居中的 可以通过vertical-align 可选值bottom middle*/vertical-align: top;text-align: center;}/* tr的父元素是tbody(会自动创建)，不是table */tbody>tr:nth-child(odd){background-color: aqua;}/* 一个新方法可以将内置盒子设为居中 */.box1{width: 300px;height: 300px;background-color: yellow;vertical-align: middle;display: table-cell;/* 将元素设置为table-cell，在设置垂直居中 */
}
.box2{width: 100px;height: 100px;background-color: red;margin: 0px auto; /* 设置水平居中 */}</style>
</head>
<body><div class="box1"><div class="box2"></div></div><table><tr><td>学号</td><td>姓名</td><td>性别</td><td>地址</td></tr><tr><td>1</td><td>孙悟空</td><td>男</td><td>花果山</td></tr><tr><td>2</td><td>猪八戒</td><td>男</td><td>高老庄</td></tr></table>
</body>表单
表单：在网页中使用表单，表单用于将本地的数据提交给服务器;使用form标签来创建表单
action目标服务器地址(action中写什么表现出什么)
<body><form action="target.html">文本框：<input type="text" name="username"><!-- 必须指定一个name，服务器才能收到 -->密码框：<input type="password" name="password" id="">单选按钮：<input type="radio" name="radio" value="1" checked> <input type="radio" name="radio" value="2"><!-- 单选框name需写一致的才可以选择一个按钮;还需指定一个value值服务器才知道选择哪一个checked默认选择-->多选框：<input type="checkbox" name="test" value="1" checked><input type="checkbox" name="test" value="2"><input type="checkbox" name="test" value="3"><br><!-- 下拉列表 --><select name="haha" id=""><option value="1">选项一</option><option value="2" selected>选项二</option><!-- selected默认列表 --><option value="3">选项三</option></select><br><input type="submit" value="提交按钮"></form>
</body>表单的补充
<body>/*关闭自动补全*/<form action="target.html" autocomplete="off"><!-- readonly 将表单设置为只读，数据会提交disable 将表单设置为禁用，数据不会提交autofocus设置表单项自动获取焦点(即刷新后自动在那一个表格) --><input type="text" name="username" value="请输入用户名" readonly><!-- value默认值 --><input type="color"><!-- 不常用 --><br><br><input type="submit"><input type="reset"><input type="button" value="按钮"><br><button type="submit">提交</button><button type="reset">重置</button><button type="button">按钮</button> <!--常用button --><br><input type="email"><!-- 在提交时会进行检查，出现提示信息(少用，不同浏览器提示信息不同) --><br><input type="text" name="username" autocomplete="off" autofocus><br><!-- autocomplete设置之后，没有之前登录信息，off关闭以前的登录信息，on是打开也可以在form中设置，全部没有登录信息 --><input type="text" name="username" ><br><input type="text" name="username" ><br></form>
</body>animation
过渡(transition)：通过过渡可以指定一个属性发生变化时的切换方法； 通过过渡可以创建非常好的效果，提高用户体验
可选值：transition-property:指定要执行过渡的属性(多个属性，分开，也可用all关键字将所有属性都过渡)
transition-property: all 2s;(auto值无法进行过渡)
transition-duration：指定过渡效果的持续时间 (俩个必须一起指定)
时间单位：ms和s 1s=1000ms transition-duration：100ms,2s;(宽100ms，高2s)
transition-timing-fuction:过渡的时序函数
可选值：ease 默认值，慢速开始，先加速，在减速
linear 匀速运动 ease-in 加速运动 ease-out 减速运动 ease-in-out 先加速后减速 cubic-bezier()来指定时序函数
steps()分布执行过渡效果 可以设置两个值(时间，值)
值：end，时间结束时执行过渡(默认值)
start，在时间开始执行过渡
transition-delay:过渡效果的延迟，等待一定时间后在执行过渡
简写属性 transition:可以设置过渡相关的所有属性，但如果想要写延迟，则两个时间中第一个是持续时间，第二个是延迟
/* transition: 2s margin-left 1s; */
/* 2s持续时间 1s延迟 */
<style>*{margin: 0;padding: 0;}.box1{width:800px;height:800px;background-color: brown;overflow: hidden;}.box1 div{width: 100px;height: 100px;margin-bottom: 100px;}.box2{background-color: #bfa;transition: all 2s;margin-left: 0; transition-timing- function:cubic-bezier(.24,.95,.28,-0.88);}.box1:hover div{margin-left: 700px;}.box3{background-color: black;transition-property: all;transition-duration: 2s;}
</style>
</head>
<body><div class="box1"><div class="box2"></div> <div class="box3"></div></div>
</body>录制_2022_04_11_19_57_52_212
动画
<style>*{margin: 0;padding: 0;}.box1{width: 800px;height: 800px;background-color: gray;overflow: hidden;}.box1 div{width: 100px;height: 100px;margin-bottom: 100px;margin-left: 0;}.box2{background-color: aqua;/* 设置box2的动画 *//* animation-name:关键帧的名字 */animation-name: test;/* animation-duration 动画执行时间 */animation-duration: 4s;/* animation-delay:动画延迟 */animation-delay: 1s;/* 动画执行次数 可选值：infinite 无限执行 *//* animation-iteration-count: infinite; *//* 指定动画运行的方向 可选值：normal 默认值从from向to运行 每次都是这样reverse 从to向from运行 每次都是这样alternate 从from向to运行 重复执行动画时反向执行alternate-reverse 从to到from运行 重复执行动画时反向执行*/animation-direction: alternate;/* 时序次数 *//* animation-timing-function: ease-in-out; *//* 动画执行的状态 running 默认值 动画执行 paused 动画暂停 *//* animation-play-state: paused; *//* animation-fill-mode:动画填充模式 none 默认值 动画执行完毕元素回到原来位置forwards 动画执行完毕元素会停止在动画结束位置backward 动画延迟等待时，元素就会处于开始位置both 结合了forwards和backward */animation-fill-mode: forwards;}/* .box1:hover div{margin-left: 700px;} *//* 动画和过渡类似，不同的是过度需要在某个属性发生变化时才会触发;而动画可以自动触发效果设置动画效果，必须要先设置一个关键帧，关键帧设置了动画执行的每一个步骤 */@keyframes test{from{/* 动画的开始位置 也可以使用0% */margin-left: 0;}to{/* 动画的结束位置 也可以使用100% */margin-left: 600px;}}</style>
</head>
<body><div class="box1"><div class="box2"></div></div>
</body>录制_2022_04_11_20_24_07_637
关键帧
<style>.box1{height: 500px;border-bottom: solid 10px black;margin: 50px 0;overflow: hidden;}.box1 div{float: left;width: 100px;height: 100px;border-radius: 50%;background-color: aqua;animation: ball forwards 1s infinite linear alternate;}div.box3{background-color: red;animation-delay: 0.2s;}div.box4{background-color: yellow;animation-delay: 0.3s;}div.box4{background-color: black;animation-delay: 0.4s;}div.box5{background-color: pink;animation-delay: 0.5s;}div.box6{background-color: blue;animation-delay: 0.6s;}div.box7{background-color: rgb(255, 0, 204);animation-delay: 0.7s;}@keyframes ball{from{margin-top: 0;}to{margin-top: 400px;}}/* {from{margin-top: 0;}40%{margin-top: 100px;}80%{margin-top: 200px;}to,20%,60%{margin-top: 400px;}} */</style>
</head>
<body><div class="box1"><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div><div class="box6"></div><div class="box7"></div></div>
</body>变形平移
变形是指通过css来改变元素的形状或位置，不会影响到页面布局
transform 用来设置元素的变形效果
平移：translateX()沿着X轴方向平移
translateY()沿着X轴方向平移
translateZ()沿着X轴方向平移
平移元素，百分比是相对于自身计算
<style>body{background-color: silver;}.box1{width: 200px;height: 200px;background-color: aqua;margin: 0 auto;margin-top: 100px;transform: translateX(-50%);}.box2{width: 200px;height: 200px;background-color: red;margin: 0 auto;}.box3{background-color: black;position: absolute;/*这种设置垂直居中的前提条件是有确认的高度与宽度 left: 0;right: 0;top: 0;bottom: 0;margin: auto; */transform: translateX(-50%) translateY(-50%);left: 50%;top: 50%;/* 垂直居中不需要有确认的宽高，内容可以随意加减 */}.box4{width: 200px;height: 400px;margin: 0 10px;transition: all 0.3s;background-color: white;}.box4:hover{transform: translateY(-4px);box-shadow: 0 0 10px rgba(0, 0, 0, .3);}</style>
</head>
<body><div class="box1"></div><!-- <div class="box2"></div> --><!-- <div class="box3">aaa</div> --><div class="box4"></div>
</body>Z轴平移
z轴平移属于立体效果，默认情况下不支持透视，如果需要看见效果必须设置网页的视距
<style>body{/* 设置当前网页视距为800，人距网页的距离 */perspective: 800px;}body{border: 1px red solid;background-color: silver;}.box1{width: 200px;height: 200px;background-color: aqua;margin: 100px auto;transition: 0s;}body:hover .box1{transform: translateZ(800px);}</style>
</head>
<body><div class="box1"></div>
</body>旋转
<style>body{perspective: 800px;}body{border: 1px red solid;background-color: silver;}.box1{width: 200px;height: 200px;background-color: aqua;margin: 100px auto;transition: 2s;}/* 通过旋转可以使元素沿着x轴和y轴z轴旋转指定的角度rotateX() rotateY() rotateZ() deg表示角度 turn表示圈*/body:hover .box1{/* transform: rotateZ(.50turn) *//* transform: rotateX(180deg) translateY(400px); */transform: translateZ(400px) rotateY(180deg);/* 是否显示元素的额背面 卡片效果*//* backface-visibility: hidden; */}</style>
</head>
<body><div class="box1"></div>
</body>缩放
<style>.box1{height: 200px;width: 200px;background-color: aqua;transition: 2s;margin: 10px auto;}.box1:hover{/* 放大整数，缩小整数前加小数点scaleX();scale()双方向的缩放 */transform: scale(.2);/* 变形的原点 默认值center */transform-origin: 20px 20px;}.box2{height: 280px;width: 280px;border: red 1px solid;margin: 0 auto;}img{animation: .2s;}.box2:hover img{transform: scale(1.2);}</style>
</head>
<body><div class="box2"><img src="../练习/1.webp"></div><div class="box1"></div>
</body>更多推荐
CSS(3)
发布评论