背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
.box {
width: 300px;
height: 200px;
border: 1px solid;
background-image: url(./img/1.jpg);
/* background-size: cover; */
/* background-size: auto; */
/* background-size: auto 40px; */
/* 水平方向50%,垂直方向40像素高 */
background-size: 50% 40px;
background-size: contain;
background-repeat: no-repeat;
}
语法:
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;
注意:当使用 background-attachment 为fixed时,该属性将被忽略不起作用。
语法:
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
在设置css的background的图片的时候,可以设置多个背景图,背景图之间用逗号隔开。而且背景图可以用线性渐变代替。
.box {
background: linear-gradient(to right, transparent, red),
url("https://mdn.mozillademos.org/files/15525/critters.png");
}
上课代码
.box {
width: 300px;
height: 300px;
border: 100px solid rgba(33,33,33,.4);
background:
url(../img/border.png) right bottom no-repeat,
linear-gradient(to right, rgba(0,33,0,.4), rgba(0,0,200, .9)),
url(../img/a.jpg) no-repeat;
/* cover: 铺满整个div */
background-size: cover;
/* 把图片缩放到能完整的显示整个背景图 */
/* background-size: contain; */
/* 设置具体的宽度和高度,可以是百分比或者像素 */
/* background-size: 200px 50%; */
padding: 100px;
/* 背景图默认从padding开始进行显示 */
/* 设置背景图从内容区域进行显示 */
/* background-origin: content-box; */
/* background-origin: padding-box; */
background-origin: border-box;
/* background-clip: padding-box; */
background-clip: content-box;
}
渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。 可分为线性渐变、径向渐变
为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让浏览器去平滑的过渡,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。
简单线性渐变。linear-gradient()方法,第一个参数方向,后面参数是渐变的颜色,颜色可以是多个颜色后面可以设置百分比表示渐变到盒子的位置。
例如:
background: linear-gradient(to bottom, blue, white);
从顶部渐变到底部,颜色由蓝色到白色
background: linear-gradient(to right, red, blue 20%, white);
向右渐变,颜色由红色渐变到蓝色(20%的位置为蓝色)然后到白色
线性渐变还可以设置按照某个角度进行渐变,渐变的角度的参考如下图:
渐变的角度
.box-line {
color: red;
width: 200px;
height: 200px;
border: 1px solid #089;
float: left;
background: linear-gradient(0deg, black, white);
}
.box-line:nth-child(1) {
background: linear-gradient(90deg, black, white);
}
.box-line:nth-child(2) {
background: linear-gradient(180deg, black, white);
}
.box-line:nth-child(3) {
background: linear-gradient(270deg, black, white);
}
角度渐变
渐变还支持颜色的透明度:
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)));
上课代码
.box {
border: 1px solid #ccc;
width: 200px;
height: 200px;
/* to left/top/right/bottom: 从X的反方向的位置到具体的X位置。 */
/* background-image: linear-gradient(to left, rgba(33,0,0,.9), rgba(33,0,0,.1)); */
/* background-image: linear-gradient(to top, rgba(33,0,0,.9), rgba(33,0,0,.1)); */
/* background-image: linear-gradient(to bottom, rgba(33,0,0,.9), rgba(33,0,0,.1)); */
/* background-image: linear-gradient(to right, rgba(33,0,0,.9), rgba(33,0,0,.1)); */
/* 按照角度进行渐变 */
/* deg:角度, 整圆共360deg */
/* background: linear-gradient(-45deg, blue, red); */
/* background: linear-gradient(135deg, blue, red); */
/* 设置多个渐变的颜色 */
background: linear-gradient(45deg, blue, red 50%, yellow 70%, purple);
}
径向渐变使用 radial-gradient 函数语法. 这个语法和线性渐变很类似, 除了你可以指定渐变结束时的形状 (可能时一个圆形或者一个椭圆形) 以及它的大小. 默认来说,结束形状是一个椭圆形并且和容器的大小比例保持一致。
.box {
/* 像线性渐变一样,色标之间是等间距的 */
background: radial-gradient(red, yellow, rgb(30, 144, 255));
/* 椭圆使用最近端的值, 这就意味着从开始点(中心点)到封闭盒子的最近端的距离来指定椭圆的尺寸。 */
background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
/* 渐变的尺寸为起始点到封闭盒模型最远端的起始点的距离。 */
background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
/* 指定开始点(中心)和最近端的距离为圆的尺寸。 */
background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
/*100px的渐变半径 圆心点坐标 50px 50px*/
background: radial-gradient(100px at 50px 50px, rgba(0,0,255,1), rgba(0,0,255,.5));
}
用法跟线性渐变和径向渐变一直,方法名不一致而已。
重复线性渐变:
background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
重复径向渐变:
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
过渡是CSS3中具有颠覆性的特征之一,可以实现元素不同状态间的平滑过渡(补间动画),经常用来制作动画效果。
语法:transition: <property> <duration> <timing-function> <delay>;
参数:
ease、ease-in、ease-out、ease-in-out、linear、step-start、step-end、steps(4, end)
等。可以参考地址:MDN例子:
/* property name | duration */
transition: margin-right 4s;
/* property name | duration | delay */
transition: margin-right 4s 1s;
/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;
/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-right 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
注意:要有过渡效果,元素的状态必须从一个属性状态到另外一个属性状态,一般用于js动态修改属性、css的hover改变元素的属性等场景。 例如:
.box {
width: 150px;
height: 150px;
border: 1px solid #ccc;
position: relative;
transition: all 3s, background-color 3s;
left: 0;
}
.box:hover {
border: 1px solid red;
background-color: rebeccapurple;
left: 10px;
}
上课代码
<style>
.box {
transition-delay: 0.5s;
transition-property: width; /*all 代表对所有的可以过渡的属性应用过渡效果*/
transition-duration: 0.9s;
/* transition-timing-function: ease-in; */
/* transition-timing-function: ease-in-out; */
transition-timing-function: ease-out;
/* transition-timing-function: steps(3, end); */
width: 200px;
height: 200px;
border: 1p solid #ccc;
background-color: #aaa;
}
.box:hover {
width: 300px;
}
.box2 {
width: 200px;
height: 200px;
border: 1p solid #ccc;
background-color: lightblue;
/* 可过渡的属性,过渡的持续时间, 动画函数,delay延迟执行的时间*/
transition: all 1s ease 0.5s;
}
.box2:hover {
width: 300px;
height: 50px;
opacity: 0.5;
background-color: red;
}
</style>
<div class="box"></div>
<div class="box2"></div>
<input type="button" id="btn" value="改变box2的盒子宽度">
<script>
// js触发过渡效果
window.onload = function() {
document.querySelector('#btn').addEventListener('click', function() {
document.querySelector('.box2').style.width = '600px';
}, false);
}
</script>
转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式,配合即将学习的过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果。
demo
.box {
transition: all 0.3s ease-in;/* 配合动画效果 */
transform-origin: left top;
}
.box:hover {
/* transform: translate(90px) rotate(0.1turn); */
transform: translate(20px, 30px) rotate(30deg);
transform: translate(90px) skew(30deg) scale(0.5, .9) rotate(0.1turn);
}
transform: rotate(0.2rad);
transform: rotate(39deg);
transform: rotate(30grad);
transform: rotate(0.2trun);
注意:x\y\z的正值的方向。
3D坐标图
左手坐标系
css3中旋转后都是按照左手坐标系进行运转。旋转的正值的方向就是:手指弯曲的方向。
translate3d(10px,0px,0px)
/* 旋转 */
transform: rotate(angle); /* an <angle>, e.g. rotate(30deg) */
/* 缩放 */
transform: scale(sx[, sy]); /* one or two unitless <number>s, e.g. scale(2.1,4) */
由[sx, sy]描述指定一个二维缩放操作。如果sy 未指定,默认认为和sx的值相同。
/* X方向缩放 */
transform: scaleX(sx); /* a unitless <number>, e.g. scaleX(2.7) */
使用向量[sx, 1] 完成在X方向上的缩放.
/* Y方向缩放 */
transform: scaleY(sy) /* a unitless <number>, e.g. scaleY(0.3) */
/* 使用向量[1, sy] 完成在Y方向的缩放. */
/* 倾斜 */
transform: skew(ax[, ay]) /* one or two <angle>s, e.g. skew(30deg,-10deg) */
/* 元素在X轴和Y轴方向以指定的角度倾斜。如果ay未提供,在Y轴上没有倾斜。 */
/* X方向倾斜 */
transform: skewX(angle) /* an <angle>, e.g. skewX(-30deg) */
/* 绕X轴以指定的角度倾斜 */
/* Y方向倾斜 */
transform: skewY(angle) /* an <angle>, e.g. skewY(4deg) */
/* 绕Y轴以指定的角度倾斜 */
/* 平移 */
transform: translate(tx[, ty]) /* one or two <length> values */
/* X方向平移 */
transform: translateX(tx) /* see <length> for possible values */
/* 在X轴平移指定距离 */
/* Y方向平移 */
transform: translateY(ty) /* see <length> for possible values */
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);
transform-style: 可选值:flat(2D默认值) ,preserve-3d (3D)
要想有3D的显示效果,请选择preserve-3d。
属性指定了观察者与z=0平面的距离。
perspective: none;
/* <length> values */
perspective: 20px;
perspective: 3.5em;
透视
透视距离
参数:可选值
注:当一个元素设置了 rotateY(180deg),相当与对元素进行“翻面”,此时如果设置了backface-visibility: visible此时该元素不可见。
下一篇预告:
对应视频地址:https://chuanke.baidu.com/s5508922.html 老马qq: 515154084 老马微信:请扫码
扫码加老马微信
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。