一.css3里面移动端固定模式开发
head里面添加meta响应移动端
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no">
viewport 视口
width=device-width 宽度等于屏幕的宽
initial-scale=1.0 伸缩比例1.0
mininum-scale=1.0 最小比例1.0
maximum-scale=3.0 最大比例3.0
user-scalable=no 禁止用户缩放
二.css3里的样式
1.border-radius: 10px 20px 30px 40px;左上角,右上角,右下角,左下角
border-radius: 10px 20px 30px;左上角, 右上角和左下角,右下角
border-radius: 20px 40px;左上角和右下角,右上角和左下角
border-radius: 20px;
2.box-shadow: 10px 20px 10px red;第一个向右,第二个是向下
box-shadow: 0 0 15px red,0 0 25px yellow,0 0 35px pink; 前两个值是0是全边框阴影
text-shadow: 2px 3px 3px red;
text-shadow: 2px 3px 3px red,4px 6px 6px blue;
3.border-image: url("./img/border.png") 30 round;
border-image-source: url("./img/border.png");
border-image-slice:0;
border-image-width:30;
border-image-outset:0;
border-image-repeat: round;
4.background-image: url("./img/1.jpg");
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
background-origin:content-box;背景图像的相对位置的内容框
5.background: linear-gradient(90deg,red,#fff,blue);
background: linear-gradient(to bottom right,#fff,red);线性变化左上到右下
background: linear-gradient(0deg,red 10%,#fff 30%,orange);百分号代表该颜色所占的区域面积
background: radial-gradient(red,green,blue);
background: radial-gradient(red 30%,green 30%,blue);径向,圆心发散渐变
6.单行溢出省略
overflow: hidden;超出部分隐藏
text-overflow: ellipsis;文本省略
white-space: nowrap;不折行
7.多行溢出省略,多用box布局
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical ;
-webkit-line-clamp:3;
三.css3动画
1.
定义动画播放器
@keyframes boxanimate {
from {
transform: translatex(0px) rotatez(0deg);
}
to {
transform: translatex(500px) rotatez(360deg);
}
}
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
text-align: center;
line-height: 200px;
animation: boxanimate 2s 1s ease-in-out forwards alternate;
}
.box:hover {
animation-play-state: paused;
}
animation-delay: 1s; 设置延迟时间
animation-duration:2s;动画播放时间
animation-timing-function: linear; 动画方式
animation-name: boxanimate; 动画名称
animation-fill-mode: forwards; forwards 停留到动画之后的位置 infinite 循环播放
animation-iteration-count: 3; 动画的播放次数3
animation-direction:alternate;动画播放方式 alternate reverse 反向播放
animation-play-state: paused;动画的状态 running 运行 paused 暂停
animation: boxanimate 2s 1s ease-in-out forwards alternate; 动画名称,播放时间,延迟几秒播放,是否停留,正向反向
四.css3里的2d和3d
1.translat平移
translate 移动 默认x轴 x y z
transform:translatex(20px);
2.rotate旋转
rotate 旋转 默认z x y z
transform:rotatey(45deg);
3.scale伸缩
scale 两个指 宽 高
一个值 宽高个值一样
transform: scale(0.5);
4. skew变形
两个值 第一个x水平倾斜 第二个y垂直倾斜
一个值代表xy变化一样
transform: skew(45deg,30deg);
5.transform: matrix(0.866,1,1,0.866,0,0);最后两个是平移,第二个第三个scale,第一个第四个skew(值是旋转的角度的cos值)
6.transform-origin:100% 100%;设置旋转中心,宽、高的中心点
7. transform-style: preserve-3d;构建3维空间
8. perspective:100px; 设置透视点
五.css过渡
在默认样式里面设置过渡,一定要有过渡样式的默认样式
1.过渡延迟
transition-delay: 0s;
2.过渡时间
transition-duration: 0.5s;
3.过渡属性
transition-property: width;
4.过渡方式
transition-timing-function: ease-in;
ease-in开始的时候慢,之后快 ease-in-out两头慢 ease-out开始时快,结束时候间慢 linear匀速 ease中间快,两头慢
5. transition: border-radius 10s 0s linear, box-shadow .5s linear;第一个过渡时间,第二个过渡延迟