/* css3新特性 */
/* 1.伪类选择器 */
/* :first-child 一组兄弟元素中的第一个 和 :nth-child(1)相同
例如 ：
<ul>
<li>1</li> (选中)
<li>2</li>
<li>3</li>
</ul>
*/
li:first-child{
border-color: aliceblue;
}
/* :last-child 一组兄弟元素中的最后一个 和 :nth-last-child(1)相同
例如 ：
<ul>
<li>1</li>
<li>2</li>
<li>3</li> (选中)
</ul>
*/
li:last-child{
border-color: aliceblue;
}
/* :nth-child(n) 选择父元素的第n个子元素 其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1) n的起始值必须为1
例如 ：
<ul>
<li>1</li>
<li>2</li>(选中)
<li>3</li>
</ul>
*/
ul li:nth-child(2){
border-color: aliceblue;
}
/* :nth-last-child(n) 选择父元素的第n个子元素从最后开始 1为最后一个 其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1) n的起始值必须为1
例如 ：
<ul>
<li>1</li>
<li>2</li>(选中)
<li>3</li>
</ul>
*/
ul li:nth-last-child(2){
border-color: aliceblue;
}
/* 2.文本样式*/
/* 文本阴影 text-shadow(水平偏移距离(左右)， 垂直偏移距离(上下)，颜色) */
p{
text-shadow: -10px -10px #f90;
}
/* 文本自动换行 word-wrap */
.text{
width: 200px;
border: 1px solid #000;
word-wrap: break-word;
}
/* 单行文本溢出隐藏并显示省略号 */
.texts{
width: 50px;
/*white-space 强制变成一行 */
white-space: nowrap;
/* overflow: hidden 溢出隐藏 */
overflow: hidden;
/* text-overflow:ellipsis; 变成省略号 */
text-overflow:ellipsis;
}
/* 3.盒 */
/* 盒原角 border-radius 值可以为百分比或像素 border-top-right-radius 右上角 同理左上 右下 左下 */
.box{
width: 50px;
height: 50px;
border: 2px solid #000;
border-radius: 20%;
}
/* 盒阴影 box-shadow 与文本阴影相似 */
.box{
box-shadow: 10px 10px #f90;
}
/* 盒模型 box-sizing 盒子像素包含边框 */
*{
box-sizing: border-box;
}
/* 动画 */
.boxs{
width: 50px;
height: 50px;
background: #f90;
}
/* 过渡 transition */
/* .boxs:hover{
width: 50px;
height: 50px;
background: skyblue;
transition:all 5s 0 ;
} */
/* 变形 transform translate平移 rotate旋转 deg度 正数为顺时针 负数为逆时针 scale缩放 一个参数左右上下比例一致 俩个参数 第一个是左右第二个是上下 skew倾斜 transform-origin以哪个位置开始动画 */
.boxs:hover{
transform: rotate(30deg);
transform: scale(0.5);
/* transform: skew(25deg); */
transform-origin: 10px 10px;
}
/* @keyframes 动画名 {
0%{
}
100%{
}
}
*/
@keyframes identifier {
0%{
width: 100px;height: 100px;
}
25%{
width: 200px;height: 200px;
}
50%{
width: 200px;height: 200px;background: #000;
}
75%{
width: 200px;height: 200px;background: #f90;
}
100%{
width: 100px;height: 100px;
}
}
.boxss{
/* 调用动画 */
animation-name: identifier;
/* 动画持续时间 */
animation-duration: 5s;
}
