A我今天学习到了什么
1温习day08的知识点
1.公共样式的提取
样式文件，分层：
1.1 base：底层样式，
a.样式重置，
b.封装的样式，像浮动，伪元素清除浮动，定位，居中，宽度，伪元素设置边框等；
//就是将常用的样式进行自己的一个封装，从而简化代码
1.2 common：公共样式，一个项目中共同使用的样式，比如色调等；
//单个项目组多次运用的样式,组合
1.3 page：就是每个页面使用的样式，在其他的页面不使用的样式；
（参考bootstraps）
2.css 2d转换（transform）
transform:translate(x,y) rotate(30deg)
2.1 位移：translate(x,y)
//translateX，translateY同理
2.2 旋转： rotate（30deg）
2.3 倾斜：skew（x，y）
2.4缩放：scale(x,y)
//X,Y值设置一个则默认为两个值一样，同理
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; //无限循环
}
//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:无限循环
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; //无限循环
}
//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:无限循环
C我没掌握的
没怎么去运用，不太会实现，要多练
网友评论