A我今天學習到了什么
1溫習day08的知識點
1.公共樣式的提取
樣式文件，分層：
1.1 base：底層樣式，
a.樣式重置，
b.封裝的樣式，像浮動，偽元素清除浮動，定位，居中，寬度，偽元素設(shè)置邊框等；
//就是將常用的樣式進行自己的一個封裝，從而簡化代碼
1.2 common：公共樣式，一個項目中共同使用的樣式，比如色調(diào)等；
//單個項目組多次運用的樣式,組合
1.3 page：就是每個頁面使用的樣式，在其他的頁面不使用的樣式；
（參考bootstraps）
2.css 2d轉(zhuǎn)換（transform）
transform:translate(x,y) rotate(30deg)
2.1 位移：translate(x,y)
//translateX，translateY同理
2.2 旋轉(zhuǎn)： rotate（30deg）
2.3 傾斜：skew（x，y）
2.4縮放：scale(x,y)
//X,Y值設(shè)置一個則默認為兩個值一樣，同理
3、垂直水平居中
垂直水平居中margin：auto
//HTML
<div class="one">
<div class="two">
</div>
</div>
//css
.one{
width:400px;
height:400px;
background-color: red;
position: relative;
}
.two{
width:100px;
height:100px;
background-color: pink;
position: absolute;
margin:auto;
left:0;
top:0;
bottom:0;
right:0;｝
垂直水平居中margin：left/right
position: absolute;
margin-left：-50%width；
margin-top：-50%height；
left:50%;
top:50%;
垂直水平居中transform:translate(x,y)
position: absolute;
top:50% ;
left:50%;
transform:translate(-50%,-50%)
4.過渡（transition）
代碼如下：
<style>
div{
background: #333;
height: 200px;
width: 200px;
}
.box:hover{
transform: translateX(100px) rotate(360deg);
background: pink;
transition: all 2s linear 2s;
/*屬性 動作需要時間 過渡的效果 延遲時間*/
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
2.拓展day09的知識點
1、動畫animation
1.定義@keyframes
A.@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
div{
animation:myfirst 2s;
}
B.@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
div{
animation:myfirst 2s infinite; //無限循環(huán)
}
//css
div{
width: 100px;height: 100px;
background: red;
animation: myFirst 4S infinite;
}
@keyframes myFirst {
0%{
width: 200px;
height: 200px;
}
25%{
width: 100px;
height: 50px;
}
50%{
width: 400px;
height: 200px;
}
100%{
width: 200px;
height: 400px;
}
}
// infinite:無限循環(huán)
B我掌握了的
1、動畫animation
1.定義@keyframes
A.@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
div{
animation:myfirst 2s;
}
B.@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
div{
animation:myfirst 2s infinite; //無限循環(huán)
}
//css
div{
width: 100px;height: 100px;
background: red;
animation: myFirst 4S infinite;
}
@keyframes myFirst {
0%{
width: 200px;
height: 200px;
}
25%{
width: 100px;
height: 50px;
}
50%{
width: 400px;
height: 200px;
}
100%{
width: 200px;
height: 400px;
}
}
// infinite:無限循環(huán)
C我沒掌握的
沒怎么去運用，不太會實現(xiàn)，要多練
