字体图标
<link rel="stylesheet" href="../..">
<style>
button .iconfont{
font-size:40px;
color:orange;
}
</style>
<body>
<i class="iconfont icon-sousou"></li>
<button><i class="iconfont icon-sousou"></button>
CSS样式的继承
会继承的属性:字体属性,文本属性,字体颜色 等
不会继承:宽高,内外边距,a链接 等
过渡
transition-property:width height;
transition-duration:3s; 变化时间
transition-delay:2s;延迟
transition-timing-function:linear/steps(12);
匀速 几帧
速写 transition:all 3s;
CSS3动画
div{
width:...;
height:...;
background-colour:..;
animation-name:myMove;
animation-duration:3s;
animation-direction:altemate-reverse;
}
@keyfarmes myMove{
from{
width:300px;
height:50px;
background-colour:pink;
}
to{
...;
...;
...;
}
0%
25%
50%
75%
100%
2D转换
.father{
position:relative;
width:300px;
height:300px;
border:1px solid black;
}
.son{
position:absolute;
top:0;
left:0;
width:300px;
height:300px;
background-colour:green;
水平移动
transform:translateX(100px)/translateY(100px);
连写 transform:translate(100px,100px);
旋转
transform:rotateX(45deg)/rotateY(45deg);
连写transform:translateX(100px) rotateX(45deg);
缩放
transform:scaleX(2)/scaleY(0.2)
transform:scale(0.2)
扭曲
transform:skewX(45deg)
3D旋转
transform:translateZ(100px);
transform:rotateZ(45deg);
transform:rotateX(45deg);
transform-origin:top/100px;
阴影
文字 text-shadow:2px 2px 2px pink;
左右 上下 虚度
盒子 box-shadow:2px 2px 2px pink;
媒体查询
@media only screen and(max-width:600px){
body{
background-color:pink;
}
}
渐变
background-image:linear-gradient(pink,green);
多列
column-count:2;
column-gap:400px;