首页 > 代码库 > CSS3略谈（中二）
CSS3略谈（中二）
一、3D转换：三维变换使用基于二维变换的相同属性，可以让我们基于三个坐标方向对元素进行变换。和二维变形一样，三维变形可以使用transform属性来设置
1、 3D移动
l 方法：translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写，如：translateX(length),translateY(length), translateZ(length)
l 示例：
div:hover{ /*Y轴移动+100px*/ /*transform:translateY(100px);*/ /*X轴移动100px*/ /*transform:translateX(100px);*/ /*x轴和Y轴方向同时移动*/ transform:translate3d(100px,100px,0px); }
2、3D缩放
l scale3d(number,number,number) 使元素在这三个纬度中缩放，也可分开写，如：scaleX(),scaleY(),scaleZ()
l 示例
div:hover{ /*Y轴方向放大1倍*/ /*transform: scaleX(2);*/ /*X轴方向缩小0.5*/ /*transform: scaleX(0.5);*/ /*x轴和Y轴方向同时进行缩放*/ transform: scale3d(2,0.5,1); }
3、3D旋转
l rotate3d(x,y,z,angle)：指定需要进行旋转的坐标轴
l rotateX(angle) 是元素依照x轴旋转；
l rotateY(angle) 是元素依照y轴旋转；
l rotateZ(angle) 是元素依照z轴旋转
l 示例：
div:hover{ /*Y轴方向旋转45度*/ /*transform: rotateY(45deg);*/ /*X轴方向旋转90度*/ /*transform: rotateX(90deg);*/ /*x轴和Y轴方向同时进行旋转放*/ transform: rotate3d(1,1,0,45deg); }
4、 透视/景深效果
左手法则：大拇指指向当前坐标轴的下方向，手指环绕的方向就是正方向
l perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。当perspective:none/0;时，相当于没有设perspective(length)。比如你要建立一个小立方体，长宽高都是200px。如果你的perspective < 200px ，那就相当于站在盒子里面看的结果，如果perspective 非常大那就是站在非常远的地方看（立方体已经成了小正方形了），意味着perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果
l perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心
l transform-style：使被转换的子元素保留其 3D 转换(需要设置在父元素中)：
|
值 |
描述 |
|
flat |
子元素将不保留其 3D 位置-平面方式。 |
|
preserve-3d |
子元素将保留其 3D 位置—立体方式。 |
5、 案例：立方体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .box{ width: 200px; height: 200px; margin:100px auto; position: relative; opacity: 0.5; /*设置一下默认的变换，否则由于观察角度在正面，无法看到立方体*/ transform: rotateX(-30deg) rotateY(30deg); /*保持3D效果*/ transform-style: preserve-3d; } /*公共样式*/ .front,.back,.left,.right,.top,.bottom{ width: 200px; height: 200px; position: absolute; left: 0; top: 0; } .left{ background: red; transform: translateX(-100px) rotateY(-90deg); } .right{ background: green; transform: translateX(100px) rotateY(90deg); } .front{ background: blue; transform: translateZ(100px); } .back{ background: pink; transform: translateZ(-100px); } .top{ background: orange; transform: translateY(-100px) rotateX(90deg); } .bottom{ background: purple; transform: translateY(100px) rotateX(-90deg); } </style> </head> <body> <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> </body> </html>
二、动画：动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果.
1、 必要元素：
l 通过@keyframes指定动画序列；自动补间动画，确定两个点，系统会自动计算中间过程。这两个点就称为关键帧。我们可以设置多个关键帧
l 通过百分比将动画序列分割成多个节点；
l 在各节点中分别定义各属性
l 通过animation将动画应用于相应元素；
2、animation样式常用属性：
l 动画序列的名称:animation-name: move;
l 动画的持续时间:animation-duration: 1s;
l 动画的延时:animation-delay: 1s;
l 播放状态:animation-play-state: paused|running;
l 播放速度:animation-timing-function: linear;
l 播放次数反复:animation-iteration-count: 1;
l 动画播放完结后的状态:animation-fill-mode: forwards; （normal | reverse | alternate | alternate reverse）
l 循环播放时，交叉动画:animation-direction: alternate;
3、代码说明：
<style> *{ padding: 0; margin: 0; } div{ width: 300px; height: 300px; margin:100px auto; } div > img{ width:100%; } /*添加动画*/ @keyframes rotateAni { 0%{ /*可以同时对多个属性添加动画效果*/ transform: rotate(0deg) scale(1); } 50%{ transform: rotate(180deg) scale(2); } 100%{ transform: rotate(360deg) scale(1); } } div:hover > img{ /*动画名称-自定义*/ animation-name: rotateAni; /*动画时间*/ animation-duration: 1s; /*动画速率曲线： linear：匀速 ease：动画以低速开始，然后加快，在结束前变慢 ease-in：动画以低速开始 ease-out：动画以低速结束 ease-in-out：动画以低速开始和结束*/ animation-timing-function: linear; /*动画播放次数*/ animation-iteration-count: 4; /*动画时间延迟*/ animation-delay: 0s; /*动画播放完的状态： forwards:保持动画播放完毕后的状态 backwards:退回到原始状态(默认值)*/ animation-fill-mode: forwards; /*动画是否轮流反射播放： alternate:在规定的次数内轮流反射播放 normal:正常播放*/ /*animation-direction: alternate;*/ } div:active >img{ /*动画的当前播放状态： paused：暂停 running:运行*/ animation-play-state: paused; } </style>
4、 动画案例：汽车/钟表/宇宙
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } .clock{ width: 300px; height: 300px; border: 10px solid #ccc; margin:100px auto; border-radius: 50%; position: relative; } .line{ width: 10px; height: 310px; background-color: #ccc; position: absolute; /*定位的以父容器做为参照*/ left: 50%; top:50%; /*transform是以元素自身做为参照*/ transform:translate(-50%,-50%); } .line1,.line4{ width: 12px; } .line2{ transform:translate(-50%,-50%) rotate(30deg); } .line3{ transform:translate(-50%,-50%) rotate(60deg); } .line4{ transform:translate(-50%,-50%) rotate(90deg); } .line5{ transform:translate(-50%,-50%) rotate(120deg); } .line6{ transform:translate(-50%,-50%) rotate(150deg); } .cover{ width: 260px; height: 260px; background-color: #fff; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform:translate(-50%,-50%); } .hour,.minute,.second{ position: absolute; left: 50%; top:50%; transform: translate(-50%,-100%); /*设置旋转轴心*/ transform-origin: center bottom; } .hour{ width: 6px; height: 80px; background-color: red; animation: clockAnimation 43200s linear infinite; } .minute{ width: 4px; height: 100px; background-color: green; animation: clockAnimation 3600s linear infinite; } .second{ width: 2px; height: 120px; background-color: blue; /*添加动画*/ animation: clockAnimation 60s infinite steps(60); } .center{ width: 20px; height: 20px; border-radius: 50%; backgroud-color: #ccc; position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); } /*创建动画*/ @keyframes clockAnimation { from{ transform:translate(-50%,-100%) rotate(0deg); } to{ transform:translate(-50%,-100%) rotate(360deg); } } </style> </head> <body> <div class="clock"> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> <div class="line line4"></div> <div class="line line5"></div> <div class="line line6"></div> <div class="cover"></div> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> <div class="center"></div> </div> </body> </html>
三、web字体和字体图标：开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。它的支持程度比较好，甚至IE低版本浏览器也能支持。
1、字体格式
不同浏览器所支持的字体格式是不一样的，我们有必要了解一下有关字体格式的知识。
l TureTpe(.ttf)格式
l .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
l OpenType(.otf)格式
l .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
l Web Open Font Format(.woff)格式
l woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
l Embedded Open Type(.eot)格式
l .eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
l SVG(.svg)格式
l .svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+
2、字体图标
常见的是把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了
l 优点
1、 将所有图标打包成字体库，减少请求；
2、 具有矢量性，可保证清晰度；
3、 使用灵活，便于维护
l 生成字体图标文件
1、 下载字体图标文件：如https://www.awesomes.cn/的网站的介绍和使用
2、 自定义字体
/*定义字体图标*/ @font-face { font-family: ‘wjs‘; //自定义的字体名称 src: url(‘../fonts/MiFie-Web-Font.eot‘); /* IE9*/ src: url(‘../fonts/MiFie-Web-Font.eot‘) format(‘embedded-opentype‘), /* IE6-IE8 */ url(‘../fonts/MiFie-Web-Font.woff‘) format(‘woff‘), /* chrome、firefox */ url(‘../fonts/MiFie-Web-Font.ttf‘) format(‘truetype‘), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url(‘../fonts/MiFie-Web-Font.svg‘) format(‘svg‘); /* iOS 4.1- */ }
3、 通过css样式使用字体
/*自定义字体图标*/ .wjs_font_icon{ font-family: wjs; //这里对应着自定义的字体名称 } /*手机图标对应的编码*/ .wjs_font_icon_phone::before{ content: "\e908"; //指定显示的内容 }
四、多列布局：CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样
1、 常用属性：
l column-count: 属性设置列的具体个数
l column-width: 属性控制列的宽度
l column-gap: 两列之间的缝隙间隔
l column-rule: 规定列之间的宽度、样式和颜色
l column-span: 规定元素应横跨多少列(n:指定跨n列 all:跨所有列)
2、 多列的用法：
<style> *{ padding: 0; margin: 0; } .wrapper{ width:1054px; padding:20px; margin:0 auto; font-family: "微软雅黑",Arial; /*设置以几列的方式显示*/ column-count:2; /*指定列宽*/ column-width:500px; /*指定列与列之间的间距*/ column-gap: 50px; /*指定列与列之间间隙的样式*/ /*column-rule:2px dotted red*/ /*相对应下面的三个属性*/ column-rule-color:red; column-rule-style:dotted; column-rule-width:2px; } .wrapper > h4{ column-span: all; } </style>
3、 列高度的平衡：
如果设定列的最大高度，这个时候，文本内容会从第一列开始填充，然后第二列，第三列
max-height: 300px;
五、伸缩布局
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。
l 重要属性
1、 display:flex:如果一个容器设置了这个属性，那么这个盒子里面的所有直接子元素都会自动的变成伸缩项(flex item)
2、justify-content: 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐 方式,语法：justify-content：flex-start | flex-end | center | space-between | space-around
l flex-start：弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
l flex-end：弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
l center：弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。
l space-between：弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于‘flex-start‘。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
l space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于‘center‘。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
3、flex-flow: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。它用来设置或检索弹性盒模型对象的子元素排列方式,它的两种取值：flex-direction：定义弹性盒子元素的排列方向。flex-wrap：控制flex容器是单行或者多行。
l flex-direction： flex-direction：row | row-reverse | column | column-reverse
1、 row：主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
2、 row-reverse：对齐方式与row相反。
3、 column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
4、 column-reverse：对齐方式与column相反。
l flex-wrap： flex-wrap：nowrap | wrap | wrap-reverse
1、 nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
2、 wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
3、 wrap-reverse：反转 wrap 排列。
4、flex属性：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
l 语法：flex: [flex-grow] [flex-shrink] [flex-basis]：大多数情况下没必要使用这种语法，当使用flex缩写时，大多数情况下没必要使用这种语法
l flex: [number]：这个语法指定了一个数字，代表了这个伸缩项目该占用的剩余空间比例
l flex: auto：属性值被设为auto的伸缩项目，会根据主轴自动伸缩以占用所有剩余空间
CSS3略谈（中二）