HML5day03
作者:gqk
一:渐变:
渐变是CSS3当中比较丰富多彩的一个特性,通过渐变我们可以实现许多炫丽的效果,有效的减少图片的使用数量,并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变
1. linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果
a) 语法:
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
a) 参数说明:
Ø 第一个参数表示线性渐变的方向,
1. to left:设置渐变为从右到左。相当于: 270deg;
2. to right:设置渐变从左到右。相当于: 90deg;
3. to top:设置渐变从下到上。相当于: 0deg;
4. to bottom:设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。也可以直接指定度数,如45deg
Ø 第二个参数是起点颜色,可以指定颜色的位置
Ø 第三个参数是终点颜色,你还可以在后面添加更多的参数,表示多种颜色的渐变
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 300px; height: 300px; /*添加渐变:渐变不是一个单一色,它产生的是图像,所以需要使用background*/ /*linear-gradient(方向,开始颜色 位置,颜色2 位置,颜色3 位置...);*/ /*方向: to top:0deg to right:90deg to bottom:180deg --默认值 to left:270deg*/ /*background: linear-gradient(to right,red,blue)*/; background: linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%); } </style> </head> <body> <div></div> </body> </html>
2. radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果
a) 语法:
<radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)
a) 取值:
i. <position> 确定圆心的位置。如果提供2个参数,第一个表示横坐标,第二个表示纵坐标;如果只提供一个,第二值默认为50%,即center
ii. shape:渐变的形状,ellipse表示椭圆形,circle表示圆形。默认为ellipse,如果元素形状为正方形的元素,则ellipse和circle显示一样
iii. size:渐变的大小,即渐变到哪里停止,它有四个值。 closest-side:最近边; farthest-side:最远边; closest-corner:最近角; farthest-corner:最远角。默认是最远的角farthest-corner
iv. <color>:指定颜色。Rgba hsla
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 300px; height: 200px; /*添加径向渐变:产生也是图像*/ /*background: radial-gradient(red,blue);*/ /*语法:radial-gradient(形状 大小 坐标,颜色1,颜色2...): 形状shape:circle:产生正方形的渐变色 ellipse:适配当前的形状,如果是正方形的容器,两者效果一样.如果宽高不一样,默认效果切换到ellipse at position:坐标,默认在正中心。可以赋值坐标(参照元素的左上角),也可以赋值关键字(left center right top bottom) 大小size: closest-side:最近边; farthest-side:最远边; closest-corner:最近角; farthest-corner:最远角。默认是最远的角farthest-corner*/ /*background: radial-gradient(circle,red,blue);*/ /*background: radial-gradient(circle farthest-side at 50px 50px,red,blue);*/ /*background: radial-gradient(at left top,red,blue);*/ /*设置颜色的位置*/ background: radial-gradient(red,red 50%,blue 50%,blue); } </style> <body> <div></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ background-color: #ccc; } div:first-of-type{ width: 300px; height: 300px; /*background: radial-gradient(//径向 #fff 0%,#fff 10%, #000 10%,#000 20%, #fff 20%,#fff 30%, #000 30%,#000 40%);*/ //最近的边默认最远的角 background: repeating-radial-gradient(circle closest-side at center center,//径向重复 #fff 0%,#fff 10%, #000 10%,#000 20%); } div:last-of-type{ width: 200px; height: 800px; background: repeating-linear-gradient(45deg,//线性重复 #fff 0%,#fff 10%, #000 10%,#000 20%); } </style> </head> <body> <div></div> <div></div> </body> </html>
背景的设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 500px; height: 500px; border: 1px solid red; overflow: scroll; /*1.添加背景颜色*/ /*background-color: skyblue;*/ /*2.添加背影图片 如果图片大于容器,那么默认就从容器左上角开始放置 如果图片小于容器,那么图片默认会平铺*/ /*background-image: url("../images/bg-img.jpg");*/ background-image: url("../images/share1.png"); /*3.设置背景平铺 round:会将图片进行缩放之后再平铺 space:图片不会缩放平铺,只是会在图片之间产生相同的间距值*/ /*background-repeat: space;*/ /*4.设置在滚动容器的背景的行为:跟随滚动/固定 fixed:背景图片的位置固定不变 scroll:当滚动容器的时候,背景图片也会跟随滚动*/ /*local和scroll的区别:前提是滚动当前容器的内容 local:背景图片会跟随内容一起滚动 scroll:背景图片不会跟随内容一起滚动*/ background-attachment: scroll; } </style> </ead> <body> <div> <p style="height: 800px;"></p> </div> <span style="height: 800px;display: block"></span> </body> </html>
过度手风琴案例:(先讲下面)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ 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:0px; overflow: hidden; /*display: none;*/ /*添加过渡效果:过渡效果只能产生从某个值到另外一个具体的值的过渡*/ /*1.一定要设置为哪些css样式添加过渡效果*/ /*transition-property: display;*/ transition-property: height; /*2.一定要设置过渡效果的耗时*/ transition-duration: 1s; } .item > .itemBox > ul{ list-style: none; background-color: #eaffb6; padding:10px; } /*为item添加hover伪类*/ .item:hover > .itemBox{ /*display: block;*/ height: 110px; } </style> </head> <body> <div class="menu"> <div class="item"> <h3>市内新闻</h3> <div class="itemBox"> <ul> <li>西科java开发</li> <li>西科java开发</li> <li>西科java开发</li> <li>西科java开发</li> </ul> </div> </div> <div class="item"> <h3>省内新闻</h3> <div class="itemBox"> <ul> <li>西科java开发</li>
<li>西科java开发</li>
<li>西科java开发</li>
<li>西科java开发</li> </ul> </div> </div> <div class="item"> <h3>国内新闻</h3> <div class="itemBox"> <ul> <li>西科java开发</li>
<li>西科java开发</li>
<li>西科java开发</li>
<li>西科java开发</li> </ul> </div> </div> <div class="item"> <h3>国际新闻</h3> <div class="itemBox"> <ul> <li>西科java开发</li>
<li>西科java开发</li>
<li>西科java开发</li>
<li>西科java开发</li> </ul> </div> </div> </div> </body> </html>
过度:
1)添加过渡效果 transition-property:left
2)添加耗时:transition-duration: 2s
3) 添加函数设置速率 transition-timing-function: linear;
4)过渡效果的延迟:transition-delay: 2s;
简写:transition:属性名称 过渡时间 时间函数 延迟
transition: left 2s linear 0s
为多个样式同时添加过渡效果
transition: left 2s linear 0s,background-color 5s linear 0s
demo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; background-color: red; position: absolute; left: 100px; top: 100px; /*添加过渡效果:过渡效果执行完毕之后,默认会还原到原始状态*/ /*1.transition-property:添加过渡效果的样式属性名称*/ /*transition-property: left;*/ /*2.transition-duration:过渡效果的耗时 以秒做为单位*/ /*transition-duration: 2s;*/ /*3.transition-timing-function:设置时间函数--控制运动的速度*/ /*transition-timing-function: linear;*/ /*4.transition-delay:过渡效果的延迟*/ /*transition-delay: 2s;*/ /*简写:transition:属性名称 过渡时间 时间函数 延迟*/ /*transition: left 2s linear 0s;*/ /*为多个样式同时添加过渡效果*/ /*transition: left 2s linear 0s,background-color 5s linear 0s;*/ /*为所有样式添加过渡效果 all:所有样式 1.所有样式的过渡效果一样 2.效率低下,它会去查询所有添加的样式 3.建议:以后不要这么写 4.steps(4):可以让过渡效果分为指定的几次来完成*/ transition:all 2s steps(4); -moz-transition: all 2s steps(4); -webkit-transition: all 2s steps(4); -o-transition: all 2s steps(4); } /*单击*/ div:active{ left: 1000px; background-color: blue; } </style> </head> <body> <div></div> </body> </html>
一:2D转换:
通过 CSS3 transform转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸.
2D移动:translate()。
a) 语法:translate(tx) | translate(tx,ty)
a) 也可以使用translateX(tx) 或者 translateY(ty)
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> *{ margin: 0; padding: 0; } div{ height: 200px; width: 200px; margin-left: 200px; margin-top:10px; background-color: red; transition: transform 2s; } div:first-of-type:active{ transform: translate(100px) ; } </style> </head> <body> <div>1</div> </body> </html>
2D操作
1. 缩放scale()
函数让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值,使一个元素缩小;而任何大于或等于1.01的值,让元素显得更大.缩放是参照元素中心点。
2. 2D旋转:
rotate(度数):旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作,接受一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转
3,2D翻转:skew():
1. 能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同,rotate()函数只是旋转,而不会改变元素的形状。skew()函数不会旋转,而只会改变元素的形状
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } div{ width: 100px; height: 100px; background-color: red; margin-left: 200px; margin-top:10px; /*添加过渡效果 css样式名称 耗时*/ transition: transform 2s; } /*移动translate*/ div:first-of-type:active{ /*使用transform实现元素的移动 a.移动是参照元素的左上角 b.执行完毕之后会恢复到原始状态 1.如果只有一个参数就代表x方向 2.如果有两个参数就代表x/y方向*/ /*transform: translate(100px);*/ /*transform: translate(400px,500px);*/ /*transform: translate(0px,500px);*/ /*添加水平或者垂直方向的移动*/ /*transform:translateX(300px);*/ transform:translateY(300px); } /*缩放:scale*/ div:nth-of-type(2):active{ /*实现缩放 1指不缩放,>1.01放大 <0.99缩小 参照元素的几何中心 1.如果只有一个参数,就代表x和y方向都进行相等比例的缩放 2.如果有两个参数,就代表x/y方向*/ /*transform: scale(2);*/ /*transform: scale(2,1);*/ /*缩放指定的方向 */ /*transform:scaleX(0.5);*/ transform:scaleY(0.5); } /*旋转:rotate*/ div:nth-of-type(3){ /*设置旋转轴心 1.x y 2.关键字:left top right bottom center*/ background-color: purple; transform-origin: left top; } div:nth-of-type(3):active{ /*transform:rotate(-90deg); transform: translateX(700px);*/ /*同时添加多个transform属性值*/ transform: translateX(700px) rotate(-90deg); /*transform: rotate(-90deg) translateX(700px); 会改变值 会旋转当前的坐标系*/ } /*斜切:skew*/ div:nth-of-type(4):active{ background-color: blue; /*如果角度为正,则往当前轴的负方向斜切,如果角度为,则往当前轴的正方向斜切*/ transform:skew(-30deg); /*transform:skew(30deg,-30deg);*/ /*设置某个方向的斜切值*/ /*transform:skewX(30deg);*/ /*transform:skewY(30deg);*/ } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </body> </html>
改变旋转的轴心:
/*设置旋转轴心
1.x y
2.关键字:left top right bottom center*/
transform-origin: left top; 左上角旋转
卡牌旋转:(鼠标移动上去后)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ 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); } </style> </head> <body> <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> </body> </html>
同时添加多个transform值(安全卫士 案例)
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> *{ margin: 0; padding: 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: none; } </style> </head> <body> <div class="box"> <img src="img/shield_1_01.png" /> <img src="img/shield_1_02.png" /> <img src="img/shield_1_03.png" /> <img src="img/shield_1_04.png" /> <img src="img/shield_1_05.png" /> <img src="img/shield_1_06.png" /> <img src="img/shield_1_07.png" /> <img src="img/shield_1_08.png" /> <img src="img/shield_1_09.png" /> </div> </body> </html>
任意元素居中:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ width: 400px; height: 400px; border-radius: 200px; background-color: #ccc; margin: 100px auto; position: relative; } .rec{ width: 100px; height: 100px; background-color: red; position: absolute; /** * 定位的百分比参照父容器的宽高 */ left: 50%; top: 50%; /*margin-top: -50px; margin-left: -50px;*/ transform: translate(-50%,-50%); } </style> </head> <body> <div class="box"> <div class="rec"> </div> </div> </body> </html>
移动,旋转,斜切,缩放
3D
1. 3D移动
方法:translate3d(x,y,z)
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> *{ padding: 0; margin: 0; } div{ width: 100px; height: 100px; background-color: red; margin-left: 200px; margin-top: 10px; transition: transform 2s; } /** * 添加3d移动 */ div:first-of-type:active{ transform: translate3d(400px,400px,400px); } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </body> </html>
1. 3D缩放
a) scale3d(number,number,number) 使元素在这三个纬度中缩放,也可分开写,如:scaleX(),scaleY(),scaleZ()
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> *{ padding: 0; margin: 0; } div{ width: 100px; height: 100px; background-color: red; margin-left: 200px; margin-top: 10px; transition: transform 2s; } /** * 3d缩放 * >1.01放大 <0.99缩小 */ div:nth-of-type(2):active{ transform: scale3d(2,0.5,10) } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </body> </html>
1. 3D旋转
a) rotate3d(x,y,z,angle):指定需要进行旋转的坐标轴
b) rotateX(angle) 是元素依照x轴旋转;
c) rotateY(angle) 是元素依照y轴旋转;
d) rotateZ(angle) 是元素依照z轴旋转
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> *{ padding: 0; margin: 0; } div{ width: 100px; height: 100px; background-color: red; margin-left: 200px; margin-top: 10px; transition: transform 2s; } /** * 添加3d旋转 */ div:nth-of-type(3):active{ /*transform: rotate3d(x,y,z,angle) x:代表x轴方向上的一个向量 * */ transform: rotate3d(1,1,1,330deg) } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </body> </html>