CSS形變與動畫
阿新 • • 發佈：2018-12-14
形變
<!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>動畫
<!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% {
margin-left: 800px;
margin-top: 50px;
}
66.6% {
margin-left: 500px;
margin-top: 300px;
}
/*終點需要設定*/
100% {
margin-left: 200px;
margin-top: 50px;
}
}
.box {
/*animation: 動畫名 時間 運動次數(無限次:infinite) 運動曲線*/
animation: hehe 2s 1 linear;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>