喔地css3和小技巧

CSS3
1—1快捷敲代码Dw中
例子1：div.box>ul.big>li.boss*2+Tab
< div class=“box”>
< ul class=“big”>
< li class=“boss”>
< li class=“boss”>
< /ul>
< /div>
例子2
1-2：
h200+tab=height：200px； m200+tab=margin：200px；
t200+tab=top：200px； p200+tab=padding：200px；
打出属性的首字母 再加样式的数值 再加tab建。
CSS3 小知识
2—1选择器
:first-child（n） :first-of-type（n）
:last-child（n） :last-of-type（n）
:only-child（n） :nth-of-type(n)
:nth-of-type(n) :nth-child(n)
:nth-child(n) :nth-last-child(n)
:nth-last-child(n) :nth-last-of-type(n)

2-2不断变化颜色效果 鼠标移入放大
< style>
div{
width:200px;
height:200px;
background:red;
animation:boos 3s;
margin: auto;
border-radius: 50%;
animation-iteration-count: infinite;
transition: width 1s;
transform: height 1s;
margin-top: 250px;
}
div:hover
{
width:300px;
height: 300px;
cursor: pointer;
}
@keyframes boos
{
0%{background:#E80B0B; }
25% {background:#DAE706; }
50%{background:#19E72A; }
75%{background:#0CDDA6; }
100%{background:#1F38C9; }
}
< /style>

2-3.旋转加伪类加缩方

.box7{
height: 200px;
width: 200px;
background: #E1F54F;
animation-iteration-count: infinite;
margin: 0 auto;
cursor: pointer;
margin-top: 300px;
transform:scale(2,2);
}
.box7:hover{
transform: rotate(60deg);
background: #2E819F;
animation: box7 0.5s ease infinite;
}
@keyframes box7
{
0% {transform:rotate(60deg); background: red; }
25% {transform:rotate(100deg); background: yellow;}
50% {transform:rotate(200deg); background: blue;}
75% {transform:rotate(300deg); background: green;}
100% {transform:rotate(350deg);background: red; }
}