多重背景&过渡

Posted 2020-08-05 程序猿1990

背景图片的调节,可以直接用属性调整背景图片的大小：background-size:contain是宽高缩放，直到某一边到底为止

　　　　　　　　　　　　　　　　　　　　　　　　background-size:cover是缩放图片，有可能某一边会出盒子

设置背景图片的开始位置background-origin:border-box     从边框开始

　　　　　　　　　　　background-origin:padding-box     从边框内部开始

　　　　　　　　　　　background-origin:content-box     从内容区域开始

设置背景图片的裁切  background-clip:border-box     从边框开始

　　　　　　　　　　　background-clip:padding-box     从边框内部开始

　　　　　　　　　　　background-clip:content-box     从内容区域开始

背景图片设置时，设置位置和大小用/分隔开

background:url(‘xxxxx.jpg‘) no-repeat center center/cover;

设置 body html 跟浏览器一样高
            body默认是一个 div 会根据 子元素的高度 被顶大
        body,html{
            height: 100%;
        }

 

transition过渡

transform是一个属性，也可以被transition使用，transition:transform 1s;/////transform最主要的有三个方法transform:translate(x,y);xy是指移动长度/////transform:scale(x,y);xy是指缩放倍数，都为0时表示隐藏？//// rotate(180deg);里面只写角度

transition-property:width;表示过渡的属性

transition-duration:1s;表示持续时间

transition-delay:1s;表示延迟时间，一般用于设置先后动画，写前面动画执行的时间

transition-timing-function:linear;动画的播放线性，可以在贝塞尔网站设置具体数值http://cubic-bezier.com/

举例：transition:width 1s,

　　　　height 1s 1s linear;

transform-origin: center;变换的中心点,默认是元素的正中心,可以修改为 任意的位置

transform-style: preserve-3d; 如果 有3d方向的 改变, 需要为父容器 添加该属性 才能够看到 3d效果

3D比2D多了Z轴，方向是浏览器往外，可以参考左手准则来判断3D中的方向

transform: rotateZ() rotateX() rotateY();
transform: translateX()translateY() translateZ();
transform: scaleX() scaleY() scaleZ();

perspective: 1000px; 设置元素距离浏览器的长短，设置的位置是祖先容器，距离越小3D效果越明显，不过到75px的时候看不到元素
animation-name: autoMove;名字
animation-duration: 1s;持续时间          

animation-iteration-count: infinite;次数 可以给具体的数字 infinite 无限
animation-timing-function: linear;跟过渡的 取值 一模一样 也能够设置贝塞尔曲线

 

渐变

线性渐变

参数1 渐变的方向 可以设置为方向 to top left 或者 具体的角度 45deg
            参数2颜色1
            参数3颜色2 
 background-image: linear-gradient(to left top,skyblue,orange);
 background-image: linear-gradient(45deg,skyblue,orange);

background-image: linear-gradient(to left,yellow,orange);

径向渐变

 参数1 渐变的半径 如果 两个值一样 圆形 否则是椭圆(如果是圆形 给一个值即可)
    通过attop left 可以设定 渐变的位置
    参数2 颜色1
    参数3 颜色2
    参数4 也是支持 添加多个颜色的
    谷歌浏览器不支持过渡 效果,ie支持
background-image: radial-gradient(300px 300px at center,orange 10%,skyblue 10%,orange,yellow,red,black);

background-image: radial-gradient(100px at top left,yellow,orange);

图片边框

border-image-source: url(‘xxx.jpg‘);
border-image-slice: 100 100; 切割的距离
border-image-repeat: round; 中间 平铺的方式

定义动画用@keyframes auto Move{

　　from{}如果不写，使用默认值

　　to{}

　　10%{}从0开始到设置值

　　50%{}

　　100%{}

}