故心故心故心故心小故冲啊
文章目录
1.css3选择器 E表元素
1.1属性选择器
2.2结构伪类选择器
总结:
结构伪类选择器就是选择第n个
nth-child从所有子级开始算的,可能不是同一种类型
nth-of-type 是指定同一种类型的子级,比如 ul li:nth-of-type(2) 是选择第2个li
关于nth-child(n) 我们要知道n从0开始计算的,要记住常用的公式
如果是无无序列表,我们肯定用 nth-child 更多
1.3伪元素选择器
注意;
before 和 after 必须有 content 属性
before 在内容的前面,after 在内容的后面
before 和 after 创建一个元素,但是属于行内元素。
因为在 dom 里面看不见刚才创建的元素,所以我们称为伪元素
伪元素和标签选择器一样,权重为 1
2D转换
2.1 2D 转换之移动 translate
transform: translate(x,y);
总结:
定义 2D 转换,沿着 X 和 Y 轴移动元素
translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
translate类似定位,不会影响到其他元素的位置
对行内标签没有效果
2.2 2D 转换之旋转 rotate
transform:rotate(angle)
transform-origin: x y; //可以设置中心点
总结:
角度为正时,顺时针,负时,为逆时针
默认旋转的中心点是元素的中心点
2.3 2D 转换之缩放scale
transform:scale(x,y);
总结:
transform:scale(1,1) :宽和高都放大一倍,相对于没有放大
transform:scale(2,2) :宽和高都放大了2倍
transform:scale(2) :只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2,2) transform:scale(0.5,0.5):缩小
3 动画
**动画(animation)**是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
3.1动画序列
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
请用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。这样的规则就是动画序列。
3.2基本使用方法
1.用keyframes 定义动画(类似定义类选择器)
@keyframes 动画名称 {
0%{
}
100%{
}
}
2 .元素使用动画
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
3.3 动画简写属性
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 动画等待或者结束的状态
animation: gxgxgx 5s linear 2s infinite alternate;
盒子动画结束后,停在结束位置: animation-fill-mode : forwards
想要动画走回来 ,而不是直接跳回来:animation-direction : alternate
暂停动画:animation-play-state: puased;
动画常用属性
4 3D 转换
4.1 3D移动 translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向。
transform:translate3d(x,y,z):其中 x、y、z 分别指要移动的轴的方向的距离
translform:translateX(100px):仅仅是在x轴上移动
translform:translateY(100px):仅仅是在Y轴上移动
translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ只能跟px单位)
因为z轴是垂直屏幕,由里指向外面,所以默认是看不到元素在z轴的方向上移动
4.2 透视 perspective
4.3 translateZ
4.4 3D旋转 rotate3d
transform:rotateX(45deg):沿着x轴正方向旋转 45度
transform:rotateY(45deg) :沿着y轴正方向旋转 45deg
transform:rotateZ(45deg) :沿着Z轴正方向旋转 45deg
transform:rotate3d(x,y,z,deg): 沿着自定义轴旋转 deg为角度(了解即可)
4.5 3D呈现 transfrom-style
代码写给父级,但是影响的是子盒子