css3

一.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;第一个过渡时间，第二个过渡延迟