目录
2.2 背影图片:background-image: url("");
2.4 背景图像是否随页面的其余部分滚动:background-attachment;
2.6 background-position属性相对于什么位置来定位:background-origin;
5.5 transform-origin:改变被转换元素的参照中心(改变旋转轴心)
1.渐变
通过渐变可以实现许多炫丽的效果,有效减少图片的使用数量,并且具有很强的适应性和可扩展性。
1.1 线性渐变:linear-gradient
线性渐变指沿着某条直线朝一个方向产生渐变效果
linear-gradient( [<point> || <angle>,]? <start-color>, <stop-color> [, <stop-color>]* );
[point/angle]=0个或1个;start-color=1个;stop-color>=1个
- 第一个参数表示线性渐变的方向(point-方向或angle-角度)
- to left:设置渐变为从右到左。相当于: 270deg;
- to right:设置渐变从左到右。相当于: 90deg;
- to top:设置渐变从下到上。相当于: 0deg;
- to bottom:设置渐变从上到下。相当于: 180deg。默认值,等同于留空不写。
- 也可以直接指定度数,如45deg
- 第二个参数是起点颜色,可以指定颜色的位置
- 第三个参数是终点颜色,还可以在后面添加更多的参数,表示多种颜色的渐变
1.2 径向渐变:radial-gradient
径向渐变指从一个中心点开始沿着四周产生渐变效果
radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-start>[ , <color-stop> ]+);
- shape:渐变的形状,ellipse表示椭圆形,circle表示圆形。默认为ellipse,如果元素形状为正方形的元素,则ellipse和circle显示一样。如果宽高不一样,默认效果切换到ellipse。
- size:渐变的大小,即渐变到哪里停止。 closest-side:最近边; farthest-side:最远边; closest-corner:最近角; farthest-corner:最远角。默认是最远的角farthest-corner。
- position:确定圆心的位置。可以赋值坐标(参照元素的左上角),也可以赋值关键字(left center right top bottom)。如果提供2个参数,第一个表示横坐标,第二个表示纵坐标;如果只提供一个,第二值默认为50%,即center。默认在正中心。
- color-start、color-stop:开始颜色、结束颜色。可以指定颜色位置。
1.3 重复渐变
2.背景样式
2.1 背景颜色:background-color;
2.2 背影图片:background-image: url("");
如果图片大于容器,那么默认就从容器左上角开始放置
如果图片小于容器,那么图片默认会平铺
2.3 背景平铺:background-repeat;
- no-repeat:不平铺
- repeat:默认。背景图像将在垂直方向和水平方向重复
- repeat-x:背景图像将在水平方向重复
- repeat-y:背景图像将在垂直方向重复
- round:会将图片进行缩放之后再平铺
- space:图片不会缩放平铺,只是会在图片之间产生相同的间距值
2.4 背景图像是否随页面的其余部分滚动:background-attachment;
- scroll:默认值。背景图像会随着页面其余部分的滚动而移动。
- fixed:当页面的其余部分滚动时,背景图像不会移动。
local和scroll的区别:
对于可以滚动的元素(设置为overflow:scroll的元素),设置background-attachment:local,则背景会随内容的滚动而滚动。
因为背景图是相对于元素自身内容定位,开始固定,元素出现滚动条后背景图随内容而滚动。
设置background-attachment:scroll,则背景图片不会跟随内容一起滚动。
2.5 背景大小:background-size;
- auto:默认值,保持背景图片的原始高度和宽度
- number:具体的值,可以改变背景图片的大小。建议:在使用这个属性之前先确定宽高比与容器的宽高比是否一致,否则会造成图片失真变形
- percentage:百分值,可以是0%〜100%之间任何值,但此值只能应用在块元素上,背景图片大小根据其父元素宽度的百分比来计算
- contain:背景图片按比例缩放,自适应整个背景区域,使图片全部包含在容器内(会包含整个图片,可能会造成容器的空白区域)
- cover:与contain相反,背景图片按比例缩放,自适应整个背景区域,如果背景区域不足以包含所有背景图片,图片内容会溢出(只要填满背景就可以,可能会有内容溢出)
当background-size取值为number和percentage时可以设置两个值,也可以设置一个值,当只取一个值时,第二个值相当于auto,但这里的auto并不会使背景图片的高度保持自己原始高度,而是会参照第一个参数值进行等比例缩放。
应用:背景图片大于元素容器,使背景图片居中显示
2.6 background-position属性相对于什么位置来定位:background-origin;
- border-box:从border的位置开始填充背景,会与border重叠
- padding-box:从padding的位置开始填充背景,会与padding重叠
- content-box:从内容的位置开始填充背景,会与content重叠
2.7 最终显示哪些区域:background-clip;
- border-box:显示border及以内的内容
- padding-box:显示padding及以内的内容
- content-box:显示内容部分
应用:以更大的范围响应用户,但只显示指定的图片
3.边框图片:border-image
将图片规定为包围 div 元素的边框
border-image 属性是一个简写属性,用于设置以下属性
- border-image-source:可以指定边框图片的路径,默认只是填充到容器的四个角点
- border-image-slice:该属性规定图像的上、右、下、左侧边缘的向内偏移,图像被分割为九个区域:四个角、四条边以及一个中间区域。除非使用了关键词 fill,否则中间的图像部分会被丢弃。值可以是数值也可以是百分比(相对于图像尺寸的百分比值)。如果省略第四个数值/百分比,则与第二个值相同。如果省略第三个值,则与第一个值相同。如果省略第二个值,则与第一个值相同。
(图片宽高为81px,九宫格:一 一对应)
- border-image-width:图片边框的宽度。如果没有设置这个属性,那么宽度默认就是元素的原始的边框宽度。
细节:1.边框图片的本质是背景,并不会影响元素内容的放置 2.内容只会被容器的border和padding影响
建议:一般将值设置为原始的边框的宽度。
- border-image-outset:边框图像区域超出边框的量
当border:1px solid red时,如果不用上述的两种办法解决内容与边框的重叠问题,也可以用border-image-outset:27px的方法。但这样其实存在很大的问题:(区别见下图,所以一般将它设置为0,否则它周围有其他元素时会影响到其他元素)
- border-image-repeat:图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)
- repeat:直接重复平铺
- round:将内容缩放进行完整的重复平铺
- stretch:拉伸(默认)
应用:任意拉伸的按钮:通过一个按钮的背景图片制作出任意大小的按钮,实现背景填充
4.过渡:transition
通过过渡transition,可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 要实现这一点,必须规定两项内容:1.规定希望把效果添加到哪个 CSS 属性上;2.规定效果的时长
transition 属性是一个简写属性,用于设置以下属性:(过渡效果执行完毕之后,默认会还原到原始状态)
- transition-property:添加过渡效果的样式属性名称
- transition-duration:过渡效果的耗时,以秒做为单位
- transition-timing-function:规定过渡效果的速度曲线
- linear:以相同速度开始至结束——cubic-bezier(0,0,1,1)
- ease:慢快慢——cubic-bezier(0.25,0.1,0.25,1)
- ease-in:以慢速开始——cubic-bezier(0.42,0,1,1)
- ease-out:以慢速结束——cubic-bezier(0,0,0.58,1)
- ease-in-out:以慢速开始和结束——cubic-bezier(0.42,0,0.58,1)
- cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
- transition-delay:过渡效果的延迟(过渡效果何时开始)
应用:手风琴菜单(鼠标移动上去时,以过渡效果显示全部菜单)
添加过渡效果:过渡效果只能产生从某个值到另外一个具体的值的过渡
display:none——>display:block; 这种过渡无法产生
* {
padding: 0;
margin: 0;
}
.menu {
width: 200px;
height: auto;
margin: 100px auto;
}
.item {
width: 100%;
height: auto;
}
.item > h3 {
height: 40px;
line-height: 40px;
background-color: #7dffe7;
color: orange;
border-bottom: 2px solid #ccc;
padding-left: 10px;
}
.item > .itemBox {
width: 100%;
height: 0;
overflow: hidden;
/*添加过渡效果:过渡效果只能产生从某个值到另外一个具体的值的过渡
display:none——>display:block; 这种过渡无法产生
*/
/*1.一定要设置为哪些css样式添加过渡效果*/
transition-property: height;
/*2.一定要设置过渡效果的耗时*/
transition-duration: 1s;
}
.item > .itemBox > ul {
list-style: none;
background-color: #eaffb6;
padding: 10px;
height: 90px;
}
/*为item添加hover伪类*/
.item:hover > .itemBox {
height: 90px;
}
<div class="menu">
<div class="item">
<h3>市内新闻</h3>
<div class="itemBox">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<div class="item">
<h3>省内新闻</h3>
<div class="itemBox">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<div class="item">
<h3>国内新闻</h3>
<div class="itemBox">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</div>
5.transform2D转换
通过CSS3transform转换,能够对元素进行移动、缩放、旋转、倾斜
5.1 2D移动:translate()
5.2 2D缩放:scale()
5.3 2D旋转:rotate()
5.4 2D斜切:skew()
rotate()函数只旋转,不改变元素形状;skew()函数只改变元素形状,不旋转
5.5 transform-origin:改变被转换元素的参照中心(改变旋转轴心)
应用:旋转扑克牌
*{
padding: 0;
margin: 0;
}
.pkBox{
width: 155px;
height: 219px;
position: relative;
margin:300px auto;
}
.pkBox > img{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/*添加过渡*/
transition: transform 2s;
/*设置旋转轴心*/
transform-origin: right top;
}
/*添加鼠标上移的效果*/
.pkBox:hover >img:nth-of-type(1){
transform: rotate(60deg);
}
.pkBox:hover >img:nth-of-type(2){
transform: rotate(120deg);
}
.pkBox:hover >img:nth-of-type(3){
transform: rotate(180deg);
}
.pkBox:hover >img:nth-of-type(4){
transform: rotate(240deg);
}
.pkBox:hover >img:nth-of-type(5){
transform: rotate(300deg);
}
.pkBox:hover >img:nth-of-type(6){
transform: rotate(360deg);
}
<div class="pkBox">
<img src="../images/pk1.png" alt="">
<img src="../images/pk2.png" alt="">
<img src="../images/pk1.png" alt="">
<img src="../images/pk2.png" alt="">
<img src="../images/pk1.png" alt="">
<img src="../images/pk2.png" alt="">
</div>
5.6 同时添加多个transform属性值
- 单独写两个transform是无效的,后面的会覆盖前面的,所以需要合并起来写,用空格隔开
无效写法:
transform: translateX(100px);
transform: rotate(-90deg);
有效写法:
transform: translateX(100px) rotate(-90deg);
注意:
transform: rotate(-90deg) translateX(700px);会出问题,因为旋转会将坐标系旋转,所以要先移动再旋转。
- 同时设置旋转、缩放、斜切三个变换属性:transform: rotate(360deg) scale(2,2) skew(30deg,30deg);
注意:
同时设置多个变换transform属性时,它们的执行顺序是从后向前的
比如:transform: rotate(360deg) scale(2,2) skew(30deg,30deg);
上面变换属性中会先执行skew(30deg,30deg) ,再执行 scale(2,2),最后再执行 rotate(360deg)
所以:顺序不同变换效果也会不同
应用:打散的盾牌,复原
*{
padding: 0;
margin: 0;
}
body{
background-color: #31965b;
}
.box{
width: 440px;
margin:100px auto;
}
.box > img{
transition: transform 1s;
}
/*打散盾牌碎片*/
.box > img:nth-of-type(1){
transform: translate(100px,100px) rotate(30deg);
}
.box > img:nth-of-type(2){
transform: translate(-100px,-100px) rotate(-30deg);
}
.box > img:nth-of-type(3){
transform: translate(200px,200px) rotate(60deg);
}
.box > img:nth-of-type(4){
transform: translate(-200px,-200px) rotate(-60deg);
}
.box > img:nth-of-type(5){
transform: translate(150px,150px) rotate(90deg);
}
.box > img:nth-of-type(6){
transform: translate(50px,150px) rotate(-90deg);
}
.box > img:nth-of-type(7){
transform: translate(-150px,-150px) rotate(60deg);
}
.box > img:nth-of-type(8){
transform: translate(10px,-250px) rotate(-90deg);
}
.box > img:nth-of-type(9){
transform: translate(-250px,10px) rotate(45deg);
}
/*鼠标悬停时,盾牌复原*/
.box:hover > img{
/*去掉transform*/
transform: none;
}
<div class="box">
<img src="../images/shield_1_01.png" alt="">
<img src="../images/shield_1_02.png" alt="">
<img src="../images/shield_1_03.png" alt="">
<img src="../images/shield_1_04.png" alt="">
<img src="../images/shield_1_05.png" alt="">
<img src="../images/shield_1_06.png" alt="">
<img src="../images/shield_1_07.png" alt="">
<img src="../images/shield_1_08.png" alt="">
<img src="../images/shield_1_09.png" alt="">
</div>
5.7 实现元素居中
6.transform3D转换
三维变换使用基于二维变换的相同属性,可以基于三个坐标方向对元素进行变换。
6.1 3D移动:translate3d()
6.2 3D缩放:scale3d()
6.3 3D旋转:rotate3d()
6.4 透视/景深效果(立方体案例)
- 左手法则:大拇指指向当前坐标轴的下方向,手指环绕的方向就是该坐标轴的正方向
- transform-style:被转换的子元素是否保留其 3D 转换(设置在被转子元素的父元素中)。取值: flat:子元素不保留其3D位置(平面方式);preserve-3d:子元素保留其3D位置(立体方式)
- perspective-origin:设置透视的观察角度,默认是在元素的中心
- perspective:三维透视的距离。仅作用于元素的后代,而不是其元素本身。当perspective:none/0;时,相当于没有设perspective(length)。比如要建立一个小立方体,长宽高都是200px。如果你的perspective < 200px ,那就相当于站在盒子里面看的结果,如果perspective 非常大那就是站在非常远的地方看(立方体已经成了小正方形了),意味着perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果
应用:立方体
* {
padding: 0;
margin: 0;
}
.box {
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
/*设置一下默认的变换,否则由于观察角度在正面,无法看到立方体*/
transform: rotate3d(1, 1, 0, -60deg);
/*让子元素保留3d变换之后的效果*/
transform-style: preserve-3d;
/*添加透视景深效果*/
perspective: 0;
/*设置透视的观察角度*/
perspective-origin: 0 0;
}
.box > div {
width: 200px;
height: 200px;
position: absolute;
opacity: 0.8;
}
.front {
background-color: red;
transform: translateZ(100px);
}
.back {
background-color: green;
transform: translateZ(-100px) rotateY(180deg);
}
.left {
background-color: blue;
/*移动+旋转*/
transform: translateX(-100px) rotateY(-90deg);
}
.right {
background-color: pink;
transform: translateX(100px) rotateY(90deg);
}
.top {
background-color: purple;
transform: translateY(-100px) rotateX(90deg);
}
.bottom {
background-color: orange;
transform: translateY(100px) rotateX(-90deg);
}
<div class="box">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>