1.过渡模块 transition
1.需要过渡的属性
transition-property: width,background-color;
2.过渡的时长
transition-duration: 3s, 3s;
3.指定过渡效果的延迟时间
transition-delay: 5s;
4.过渡属性运动框架
transition-
过渡属性连写格式
transition: property duration timing-function delay;
transition: 过渡属性 过渡时间 过渡运动曲线 延迟时间
2.维度模块 transform
1.缩放
transform: scale(1,1.5)
2.旋转
transform: rotate(45deg);
3.位移
transform:translateX(15px);
transform:translateY(15px);
transform: translate(200px, 100px); 水平/垂直
4.形变中心点
transform-origin: right center; / 或具体像素
维度模块连写方式
transform: scale(2) rotate(45deg) translate(-100px, 0px);
透视点 《需要添加到父元素上》
perspective: 0px;
灭点
灭点为近大远小延伸的相交点默认是父元素宽度的一半，可以通过perspective-origin：0px 0px；指定。
2D和3D
默认情况下一个元素的transform-style等于flat<2D> 如果将transform-style设置为3D 那么给这个元素的父元素设置transform-style:3D
3.动画模块 animation
动画模块三大要素<1.指定动画名称 2.创建自定义动画 3.指定动画时长>
1.动画名称:
animation-name : test;
2.动画时长
animation-duration :5s
3.动画运动曲线
animation-timing-function:linear;
4.动画重复次数 infinite 无穷大
animation-iteration-count:infinite ;
5.指定动画需是否需要往返 alternate往返.normal默认
animation-direction:alternate;
6.暂停动画 默认是running 如果设置paused 那么动画会暂停。
animation-play-state:paused;
连写格式
animation : 动画名称 动画时间 运动曲线 延迟时间 动画次数 往返动画；
连写格式简写
animation：动画名称 动画时间；
4.盒子投影
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 水平偏移量 垂直偏移量 模糊度 投影扩展 投影颜色 内外阴影;
text-shadow：
text-shadow: h-shadow v-shadow blur color;
5.渐变
线性渐变
background : linear-gradient ( red , blue);
background: linear-gradient(to right,red, blue);
background: linear-gradient(to top right,red, blue);
background: linear-gradient(0deg, red, blue);
默认情况下系统会分宽度给渐变的颜色，如果不想等分，可以直接在颜色后面添加百分比
<这里百分比是指用于计算过渡的距离>
background: linear-gradient(red, blue)
background: linear-gradient(red 50%, blue 60%)
red 30%, blue 40%, 那么40-30=10, 所有显示完红色之后会有10%的距离用于从红色过渡到蓝色
径向渐变
background-image: radial-gradient(red, blue)
第一个参数：指定扩散范围
第二个参数：指定从什么地方开始扩散
background-image: radial-gradient(150px at center center, red, blue);
background-image: radial-gradient(150px at 100px 100px, red, blue);
background-image: radial-gradient(150px at 50px 50px, red 50%, blue 50%);
重复渐变
设置background-size
.box1{
width: 300px;
height: 100px;
border: 1px solid #000;
margin: 100px auto;
background: repeating-linear-gradient(to right,red, blue);
background-size:100px 100px;
}
设置渐变距离
.box2{
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 0px auto;
/*background: repeating-radial-gradient(red, blue, yellow);*/
background: repeating-radial-gradient(red 10%, blue 20%, yellow 30%);
/*background-size:100px 100px;*/
}
6.媒体查询
可以用来判断屏幕(显示)的宽度
@media(){} 如果圆括号中条件满足就执行大括号中的代码。添加不满足就不执行
1 and 两端必须有空格
2 不同设备的取值尽量不要重复
内联式
@media (min-width: 980px) {
body{
background: url("../素材/pc.jpg");
}
}
@media (min-width: 620px) and (max-width: 979px) {
body{
background: url("../素材/ipad.jpg");
}
}
@media (max-width: 619px) {
body{
background: url("../素材/iPhone.jpg");
}
}
外联式