css3动画
2D,3D转换方法
- translate（）向x,y轴移动
transform: translate(100px,100px);
- rotate（）旋转180度
transform: rotate(180deg);
- scale（）缩放效果 调整宽高的倍数
transform: scale(0.5,2);
- skew（）倾斜x,y轴倾斜的角度
transform: skew(10deg,10deg);
- matrix（）六个参数对应矩阵
- rotateX（）3d转换中的绕x旋转
transform: rotateX(120deg);
- rotateY（）
过渡
- transition有四个属性,当鼠标移上去执行效果宽高均从100px变为200px 并旋转360度，所需时间均为两秒
div{
width: 100px;
height: 100px;
background-color: darksalmon;
transition: width 2s,height 2s,transform 2s;
}
div:hover{
width: 200px;
height: 200px;
transform: rotate(360deg);
}
- transition-property过渡的名称
- transition-duration过渡效果花费的时间
- transition-timing-function过渡效果的时间曲线
- transition-delay过渡效果的开始时间 动画效果延时两秒执行
transition-delay: 2s;
动画效果与多列
- 该区域的效果 在不同时段变色并向不同坐标移动
position: relative;
animation: animi 5s;
@keyframes animi{
0%{
background: red;
left: 0px;
top: 0px
}
25%{
background: blue;
left: 200px;
top: 0px
}
50%{
background: green;
left: 200px;
top: 200px
}
75%{
background: saddlebrown;
left: 0px;
top: 200px
}
100%{
background:red;
left: 0px;
top: 0px
}
}
- 使用多列，自动适配4列
column-count: 4;
column-gap: 30px;
column-rule: 5px outset red;
对齐
- 居中
margin-left: auto;
margin-right: auto;
margin: 0px auto;
- 居右
position: absolute;
right: 0px;
- 居左
float: left;
css3选择器详解
- 通配符，所有未指定的标签都使用通配符规定的样式
*{
}
- 类选择器结合元素使用,当class取相同值时，可以通过标签区分
a.div{
color: red;
}
- 多类选择器,同时拥有3种效果
<p class="p1 p2"> a</p>
.p1.p2{
font-style: italic;
}
- Id选择器与类选择器的区别,Id只能在文档中使用一次（不能使用重复命名），而类可以多次使用,ID选择器不能结合使用,当使用js是，需要用id
- 属性选择器,选择有特定属性值的元素或根据部分属性匹配,只要含有此关键字都可以获得效果
[title~="title"]{
font-size: 50px;
}
<p title="title">h</p>
<p title="title a">h</p>
- 后代选择器 速度较快 可以直接查找多代关系（p strong i可以直接写为 p i）
p strong{
color: aqua;
}
- 子元素选择器，一次只能查找一级关系
p>strong{
color: aqua;
}
- 相邻兄弟选择器,可选择紧接着另一个元素后的元素，且二者有相同父元素，第二个第三个li标签有特殊效果
<li>a</li>
<li>b</li>
<li>c</li>
li+li{
color: red;
font-size: 40px;
}
其他
- 设置行间距
line-height: 200%;
- 改变鼠标指示样式
p{
cursor: alias;
}
- 改变列表效果,此为变成一行
li{
display: inline;
}
- 设置元素是否可见，不可见
visibility: hidden;
- 去掉无序列表前的效果
list-style-type: none;
- opacity图片透明度，此为图片完全透明 （值0~1）
opacity:0
