首页 > 代码库 > 多重背景&过渡

多重背景&过渡

背景图片的调节,可以直接用属性调整背景图片的大小: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%{}

}

 

 

 

多重背景&过渡