2018.12.15 2d形变,动画,表格,多行文本垂直居中

Posted jutao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2018.12.15 2d形变,动画,表格,多行文本垂直居中相关的知识,希望对你有一定的参考价值。

1复习(过度,阴影,伪类设计边框,)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复习预习</title>
<link href="css/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<!-- 1.过渡 -->
<style type="text/css">
/*伪类 == class*/
div.box:hover {
background-color: green;
?
height: 100px;
}
.box.b {
background-color: yellow;
/*持续时间 延迟时间 过渡属性 过渡曲线*/
transition: 1s .1s all cubic-bezier(0, 2.43, 0.82, 1.9);

/*高度0结合overflow:hidden 等价于 影藏*/
height: 10px;
overflow: hidden;
}

</style>
?
<!-- 2.阴影 -->
<style type="text/css">
.box {
margin-top: 10px;
/*x y 虚化 宽度 颜色*/
box-shadow: 120px 0 100px 0 red, 240px 0 0px 10px blue;
}
</style>
?
<!-- 3.伪类设计边框 -->
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: yellow;
position: relative;
?
text-align: center;
?
}
.box:before {
content: "";
?
width: 90px;
height: 1px;
background-color: #000;

position: absolute;
top: 49.5px;
left: 5px;
}
.box:after {
content: "";
?
width: 1px;
height: 90px;
background-color: #000;

position: absolute;
top: 5px;
left: 49.5px;
}
.box a {
line-height: 100px;
}
</style>
<div class="box b" id="box">
<a href="" class="fa fa-arrows-alt fa-3x fa-spin"></a>
</div>
?
?
?
<!-- 1.2d形变 -->
<!-- 2.动画(了解) -->
<!-- 3.table表格 => 做demo -->
<!-- 4.小米 -->
</body>
</html>

2形变


总结
/*1.形变参考点: 三轴交界点*/
transform-origin: x轴坐标 y轴坐标;
?
/*2.旋转 rotate deg*/
transform: rotate(720deg);
?
/*偏移 translate px*/
transform: translateX(200px) translateY(200px);
?
/*缩放 scale 无单位*/
transform: scale(x轴比例, y轴比例)
?
/*注: 可以多形变, 空格隔开书写在一条transform属性中, 顺序一般会影响形变结果*/
/*形变不改变盒子布局, 只拿形变做动画*/s

2.1形变代码演示


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2d形变</title>
<style type="text/css">
div {
width: 50px;
height: 50px;
background-color: red;
margin: 30px auto 0;
text-align: center;
line-height: 50px;
transition: 3s;

/*形变参考点: 三轴交界点*/
/*transform-origin: 0 0;*/
}
.d1 {
/*形变: 只操作自身显示图层(让图层发生变化), 不影响盒子布局*/
/*注: 不拿形变来布局, 只能形变来完成动画*/
/*transform: rotate(45deg);*/
/*transform: scale(3);*/
/*transform: translateY(100px);*/
/*margin-top: 50px;*/
}
?

.d2:hover {
/*旋转: 旋转的是角度 deg*/
/*transform: rotate(720deg);*/
/*顺时针转20圈,360度1圈,z轴*/
transform: rotateZ(7200deg);
}
.d3:hover {
/*顺时针转20圈,360度1圈,y轴*/
transform: rotateY(7200deg);
}
?
.d4:hover {
/*偏移: 偏移的是距离 px*/
/*如果需要发送多状态形变,需要分别写在一条transform属性设置中*/
/*各个形变之间用空格隔开*/
/*顺序一般会影响结果*/
/*transform: translateY(100px) translateX(100px);*/

/*不能这么书写: 所有形变效果的实现都是对transform一个属性进行设置*/
/*下方这么设置,第二次赋值会覆盖第一次赋值(只能保留最后一次赋值)*/
/*向y轴或x轴偏移最下面的生效*/
transform: translateX(100px);
transform: translateY(100px);
}
.d5:hover {
/*向x轴偏移20圈*/
transform: translateX(100px) rotate(7200deg);
/*transform: rotate(7200deg) translateX(100px);*/
}
.d6:hover {
/*缩放: 缩放的是比例 无单位*/
/*x轴放大3倍,y轴放大0.5倍*/
transform: scale(3, 0.5);
/*transform: scaleX(3) scaleY(0.5);*/
}
.d7:hover {
/*x轴偏移100px,20圈,放大2倍*/
transform: translateX(100px) rotate(720deg) scale(2);
}
.d8:hover {
margin-left: 1200px;
}
</style>
</head>
<body>
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
<div class="d6">6</div>
<div class="d7">7</div>
<div class="d8"></div>
</body>
</html>

3动画


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: red;
margin-left: 200px;
margin-top: 50px;
}
?
/*实现动画*/
/*1.设置动画体*/
/*2.设置动画属性*/

/*1.设置动画体
@keyframes 动画名 {
多种状态的动画体
}
*/
/*2.设置动画属性
.box {
animation: 动画相关属性;
}
*/
@keyframes hehe {
/*起点省略采用的就是初始状态*/
0% {}
33.3% {
/*前33.3%时间移动左边*/
margin-left: 800px;
margin-top: 50px;
}
/*然后66.6%时间移动左下*/
66.6% {
margin-left: 500px;
margin-top: 300px;
}
/*终点需要设置,最后回原位*/
100% {
margin-left: 200px;
margin-top: 50px;
}
}
.box {
/*animation: 动画名 时间 运动次数(无限次:infinite) 运动曲线,能设置3d*/
animation: hehe 2s 1 linear;
?
}
?
?
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

4表格


<table>
  <caption>表格标题</caption>
  <thead>
      <tr>
          <th>标题</th>
          <th>标题</th>
          <th>标题</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>单元格</td>
          <td>单元格</td>
          <td>单元格</td>
      </tr>
       
  </tbody>
  <tfoot>
      <tr>
          <td>单元格</td>
          <td>单元格</td>
          <td>单元格</td>
      </tr>
  </tfoot>
</table>
table的全局属性:
border="1" 设置边框宽度
cellspacing="10" 单元格间的间距
cellpadding="10" 单元格的内边距
rules="rows | cols | groups | all" 边框的保留格式
?
td的全局属性
rowspan=‘2‘ 合并两行单元格
colspan=‘3‘ 合并三列单元格
?
table的高度: 由内容和设置高度中的大值决定
?
table-cell: 可以嵌套任意类型标签, 可以快速实现多行文本垂直居中
?
<!--------------------------------------------------------------------------------------------->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
<style type="text/css">
.table1 {
width: 500px;
height: 500px;
display: none;
}
th, td {
padding: 20px;
}
?
.table2 td {
/*border: 10px solid black;*/
}
</style>
</head>
<body>
<!-- table的display: table -->
<!-- table显示规则注意点: 当设置的盒子高度不足够显示内容时, 盒子高度由内容撑开, 当设置的高度大于显示内容所需高度,采用设置的高度 -->
?
<!-- border: 设置边框宽度 -->
<!-- cellspacing: 单元格间的间距 -->
<!-- cellpadding: 单元格的内边距 == th, td设置padding -->
<table class="table1" border="1" cellspacing="0">
<!-- tr>th{标题}*3 -->
<tr>
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
<!-- (tr>td{单元格}*3)*3 -->
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>

<!-- 边框的保留格式 => rules: rows | cols | groups | all -->
<table class="table2" border="10" rules="all">
<caption>表格标题</caption>
<thead>
<tr>
<th>标题</th>
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">单元格</td>
<td rowspan="2" colspan="2">单元格</td>
<!-- <td>单元格</td> -->
<td>单元格</td>
</tr>
<tr>
<!-- <td>单元格</td> -->
<!-- <td>单元格</td> -->
<!-- <td>单元格</td> -->
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>单元格</td>
<td colspan="2">单元格</td>
<!-- <td>单元格</td> -->
<td>单元格</td>
</tr>
</tfoot>
</table>
?
<!-- >>> display: table-cell => 可以嵌入任意类型标签, 可以快速实现多行文本垂直居中 -->
?
</body>
</html>
?

5.多行文本垂直居中


<div class="sup">
  <p>第一行文本</p>
  <div>第二行文本</div>
</div>
.sup {
   /*实现多行文本垂直居中 =>
  针对父级设置, 父级中的多个块级文本类子级标签垂直居中*/
   display: table-cell;
   vertical-align: middle;
}
/*注: 如果想调整sup的位置,可以给sup嵌套一个"位置层"*/
/*.box>.sup>p+div*/
?
================================================================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行文本垂直居中</title>
<style>
p {
margin: 0;
}
.box, .b1 {
width: 150px;
height: 150px;
margin: 10px auto;
background-color: pink;
text-align: center;
}
.b3 {
line-height: 150px;
}
.b2 {
line-height: 150px;
/*不起作用*/
/*vertical-align: middle;*/
}
.b1 {
/*实现多行文本垂直居中 =>
针对父级设置, 父级中的多个块级文本类子级标签垂直居中*/
display: table-cell;
vertical-align: middle;
}
?
</style>
</head>
<body>
<div class="box">
<div class="b1">
<p>好的</p>
<p>真好</p>
<div>好的</div>
<div>真好</div>
</div>
</div>
<div class="box b2">
<p>好的</p>
<p>真好</p>
</div>
<div class="box b3">好的真好好的真好好的真好好的真好</div>
</body>
</html>

 





























































































































































































































































































































































































































































以上是关于2018.12.15 2d形变,动画,表格,多行文本垂直居中的主要内容,如果未能解决你的问题,请参考以下文章

形变和动画

表格单元格中的多行文本会损坏视图

三维动画形变算法(Mixed Finite Elements)

Love2d从青铜到王者第十六篇:Love2d之动画(Animation)

iOS形变之CGAffineTransform

pdf文件怎么填写