1. 首页
  2. IT资讯

如何通过css样式设置动画,转换,过渡等界面效果

“u003Cdivu003Eu003Cp class=”ql-align-justify”u003E今天我们学习的内容有:过渡,动画,转换,伸缩盒子。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E可以说今天学习的内容都是重量级的大佬,学好了,使用css3做出酷炫的效果 So Easy!~~u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eu003Cstrongu003E1.过渡u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E在css3中,有一个属性可以设置过渡效果。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E它就是transition,所谓的过渡效果,指的就是以动画的形式慢慢演化样式属性变化的过程。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eu003Cstrongu003EA.案例:通过transition设置焦点过渡效果u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cblockquoteu003E<!DOCTYPE html><html><head><meta charset=”UTF-8″><title>Document<u002Ftitle><style>div{width: 200px;height: 200px;margin:200px;background: url(girl.jpg);border-radius:50%;transition:all 1s linear 0.3s;cursor: pointer;}div:hover{box-shadow: 0px 0px 20px blue;}<u002Fstyle><u002Fhead><body><div><u002Fdiv><u002Fbody><u002Fhtml>u003Cu002Fblockquoteu003Eu003Cp class=”ql-align-justify”u003E注意页面中的代码:u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E第一,我们给div添加了一个hover伪类样式,当我们鼠标悬停在div上方的时候,会给div盒子添加一个蓝色的盒子阴影。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E第二,我们给div盒子添加了一个transition样式,设置的值为:all 1s linear 0.3s;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E这四个数据分别对应u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Etransition-property(需要过渡的属性):如果设置为all表示所有样式属性都需要过渡。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Etransition-duration(过渡的时间):以秒作为单位,设置过渡的时间u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Etransition-timing-function(过渡的方式):常用的有linear(匀速),ease(先慢后快),ease-in,ease-out,ease-in-out等u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Etransition-delay(延迟的时间):以秒作为单位进行延迟,延迟之后开始进行过渡效果。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E所以,我们通过transition这个复合属性设置的过渡效果为:u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eall:需要过渡所有的属性u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E1s:过渡的时间为1秒u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Elinear:匀速过渡u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E0.3s:在延迟0.3秒之后开始过渡动画。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E如果大家理解了上面的描述,那么也就不难理解咱们鼠标放到div上之后,为啥会慢慢出现蓝色的光晕了,就是因为咱们添加了过渡,所以,慢慢的就会给盒子添加阴影效果。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E2.动画:u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E在学习完了过渡之后,发现咱们可以使用transition去以动画的形式展示样式的改变以及变化的过程,这可以帮助我们来实现一些过渡的动画。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E但是,有的时候,我们的需求会更加的复杂,要求会更加的多变,那么,transition可能就无法满足我们的需要了,我们需要有更加炫酷,复杂的效果呈现。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E那么,动画animation就可以满足我们的需要。u003Cu002Fpu003Eu003Cblockquoteu003E<!DOCTYPE html><html><head><meta charset=”UTF-8″><title>Document<u002Ftitle><style>@keyframes moveAndChange{0%{left:0px;top:0px;}25%{left:200px;top:200px;background:green;border-radius: 0;}50%{left:400px;top:200px;background:blue;border-radius: 50%;}75%{left:400px;top:0px;background:#ccc;border-radius: 0;}100%{left:0px;top:0px;background:red;border-radius: 50%;}}div{margin:200px;width: 200px;height: 200px;position: absolute;background:red;border-radius:50%;animation: moveAndChange 5s linear 0.5s infinite normal;}<u002Fstyle><u002Fhead><body><div><u002Fdiv><u002Fbody><u002Fhtml>u003Cu002Fblockquoteu003Eu003Cp class=”ql-align-justify”u003E代码效果如下:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F6ab04d58b64444378dc6b007c37a7392″ img_width=”432″ img_height=”240″ alt=”如何通过css样式设置动画,转换,过渡等界面效果” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-justify”u003E同样,让我们来关注编写的代码:u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E1.在样式中,首先我们使用@keyframes 来定义了一个复杂的动画,在css3中,新增了@keyframes可以来帮助我们添加动画。代码如下:u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eu002F*动画的名字叫做moveAndChange*u002Fu003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E@keyframes moveAndChange{u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eu002F*动画最初的时候,将left设置为0px,top设置为0px*u002Fu003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E0%{u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eleft:0px;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Etop:0px;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E}u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eu002F*当动画进行到25%的时候,使用动画将left过渡到200px,top过渡到200px,u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E背景颜色过渡为绿色,圆角过渡为0(无圆角)*u002Fu003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E25%{u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eleft:200px;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Etop:200px;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Ebackground:green;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eborder-radius: 0;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E}u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eu002F*当动画进行到50%的时候,使用动画将left过渡到400px,top过渡到200px,u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E背景颜色过渡为蓝色,圆角过渡为50%(正圆)*u002Fu003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E50%{u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eleft:400px;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Etop:200px;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Ebackground:blue;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eborder-radius: 50%;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E}u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eu002F*当动画进行到75%的时候,使用动画将left过渡到400px,top过渡到0,u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E背景颜色过渡为灰色,圆角过渡为0(无圆角)*u002Fu003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E75%{u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eleft:400px;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Etop:0px;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Ebackground:#ccc;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eborder-radius: 0;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E}u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eu002F*当动画结束的时候,使用动画将left过渡到0x,top过渡到0px,u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E背景颜色过渡为红色,圆角过渡为50%(正圆)*u002Fu003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E100%{u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eleft:0px;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Etop:0px;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Ebackground:red;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eborder-radius: 50%;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E}u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E}u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E这是一个比较复杂的动画效果,可以发现,它通过百分比的形式将一个完整的动画拆分成了5个部分,每个部分都有不同的样式效果,而当我们采用该动画的元素就会按照设置的顺序和样式效果进行动画的过渡和展示。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E2.上面我们只是通过@keyframes创建了一个动画,我们还需要通过特定的语法来使用这个动画。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E就是下面这句代码了:u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eanimation: moveAndChange 5s linear 0.5s infinite normal;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E它是一个复合属性,设置了6个值,分别对应:u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eanimation-name(设置动画的名称):用来设置动画的名字,我们这里写的是moveAndChange ,也就是说我们就是要使用我们刚刚创建的动画。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eanimation-duration(设置整个动画的时间):以秒作为单位,我们这里写的是5s,表示整个动画的时间为5秒u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eanimation-timing-function(设置播放动画的方式):播放动画的方式,常用的有linear(匀速),ease(先慢后快),ease-in,ease-out,ease-in-out等,我们使用的是linear匀速播放动画。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eanimation-delay(设置动画的延迟):以秒作为单位,我们写的是0.5s,表示延迟0.5秒之后开始播放动画。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eanimation-iteration-count(设置动画播放的次数):播放动画的次数,我们这里写的是infinite ,表示动画将会被播放无限次,如果写数字,那么就会播放数字对应的次数。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eanimation-direction(设置是否反向播放动画):我们写的是normal,表示正常播放动画,如果写的是u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Ealternate则表示要反向播放动画,大家也可以自己试一试这个效果。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E最终,我们通过@keyframes创建动画,通过animation设置动画,成功完成了这个复杂的动画效果。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E3.转换u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E在css3中,我们通过transform属性可以设置元素的转换效果,具体的效果如下:u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003EA.平移u003Cu002Fpu003Eu003Cblockquoteu003E<!DOCTYPE html><html><head><meta charset=”UTF-8″><title>Document<u002Ftitle><style>body{background:pink;}div{width: 200px;height: 200px;position: absolute;background: green;left:0px;top:0px;transform: translate(300px,300px);}<u002Fstyle><u002Fhead><body><div><u002Fdiv><u002Fbody><u002Fhtml>u003Cu002Fblockquoteu003Eu003Cp class=”ql-align-justify”u003E代码效果如下:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F0c0de4877e9f4fe8999a411e084a8c62″ img_width=”552″ img_height=”584″ alt=”如何通过css样式设置动画,转换,过渡等界面效果” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-justify”u003E如上图所示,本来div盒子的位置是left:0,top:0;u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E但是我们通过transform: translate(300px,300px);将盒子进行了偏移,所以,盒子的位置发生了改变。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003EB.旋转u003Cu002Fpu003Eu003Cblockquoteu003E<!DOCTYPE html><html><head><meta charset=”UTF-8″><title>Document<u002Ftitle><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: rotate(45deg);}<u002Fstyle><u002Fhead><body><div><u002Fdiv><u002Fbody><u002Fhtml>u003Cu002Fblockquoteu003Eu003Cp class=”ql-align-justify”u003E代码效果如下:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F8ee0dba362c7410ab149cd74454bb3f7″ img_width=”552″ img_height=”584″ alt=”如何通过css样式设置动画,转换,过渡等界面效果” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-justify”u003E如上图所示,本来div盒子应该是四四方方的。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E但是,经过我们的代码transform: rotate(45deg); u002Fu002Fdeg为单位,表示度数。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E进行了45度的旋转之后,呈现出来的就是一个菱形的盒子了,旋转的正方向为顺时针,负方向为逆时针。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003EC.缩放u003Cu002Fpu003Eu003Cblockquoteu003E<!DOCTYPE html><html><head><meta charset=”UTF-8″><title>Document<u002Ftitle><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: scale(0.5,0.25);}<u002Fstyle><u002Fhead><body><div><u002Fdiv><u002Fbody><u002Fhtml>u003Cu002Fblockquoteu003Eu003Cp class=”ql-align-justify”u003E代码效果如下:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F3ebdd9ea42c84d5d8ead6cffaef5fcfc” img_width=”552″ img_height=”584″ alt=”如何通过css样式设置动画,转换,过渡等界面效果” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-justify”u003E如上图所示,本来盒子的宽高为200*200,而我们通过transform: scale(0.5,0.25);进行的缩放u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Escale的第一个参数为0.5,表示横向缩小为0.5倍u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Escale的第二个参数为0.25,表示纵向缩小为0.25倍。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Escale的参数如果为1,则表示不进行任何缩放,小于1就是做缩小,而大于1表示做放大。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E小结:transform转换中其实还包含了skew(倾斜),matrix(矩阵转换),相对来说用到的不是特别多,所以在本文中我们便不再做介绍。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E4.flex布局u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003EFlex布局,可以简便、完整、响应式地实现各种页面布局。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003EFlex是Flexible Box的缩写,翻译成中文就是“弹性盒子”,用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。u003Cu002Fpu003Eu003Cblockquoteu003E<!DOCTYPE html><html><head><meta charset=”UTF-8″><title>Document<u002Ftitle><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: flex-start}.parent div{width: 20%;border:1px solid #ccc;background:pink;}<u002Fstyle><u002Fhead><body><div><div>1<u002Fdiv><div>2<u002Fdiv><div>3<u002Fdiv><div>4<u002Fdiv><u002Fdiv><u002Fbody><u002Fhtml>u003Cu002Fblockquoteu003Eu003Cp class=”ql-align-justify”u003E代码效果如下:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fcb6298374ac24d6e8d9a87040f5b49cf” img_width=”673″ img_height=”255″ alt=”如何通过css样式设置动画,转换,过渡等界面效果” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-justify”u003E如图所示,咱们通过display:flex将.parent元素设置为了flex盒子,那么子元素将会按照justify-content设置的方式进行元素的排列,目前看来,和我们没有设置flex盒子的效果是一致的。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E接下来我们更改一下,将justify-content设置为flex-end,效果如下图所示:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002Ff6e46cb6326a4c8f8af4b86a32a22c36″ img_width=”673″ img_height=”258″ alt=”如何通过css样式设置动画,转换,过渡等界面效果” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-justify”u003E所以我们就应该发现,flex-start是让所有的子元素从父元素的左侧开始排列u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E而flex-end是让所有的子元素从元素的右侧开始排列。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E我们再来更改一下,将justify-content设置为center,效果如下图所示:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F7aaf0fc9a9c84b2895a330a7e590323c” img_width=”673″ img_height=”258″ alt=”如何通过css样式设置动画,转换,过渡等界面效果” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-justify”u003E更厉害了,子元素在父盒子的中央位置排列显示了。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E然后,我们再将justify-content设置为space-around,效果如下图所示:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Ff9b8cf9f57404cdea7759396bfef3a95″ img_width=”673″ img_height=”258″ alt=”如何通过css样式设置动画,转换,过渡等界面效果” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-justify”u003E它是平均分配的形式为每一个子元素设置了间距,但是看起来有点变扭。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E所以我们推荐将justify-content设置为space-between,效果如下图:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fed495537bc76484ea0f055051e4d635a” img_width=”673″ img_height=”258″ alt=”如何通过css样式设置动画,转换,过渡等界面效果” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-justify”u003E我们还可以通过flex-wrap来设置子元素是否换行显示,以及flex-direction设置子元素排列的顺序。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E这两个属性可以设置的值如下:u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eflex-wrap: nowrap;u002Fu002F不换行,会自动收缩u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eflex-wrap: warp;u002Fu002F换行,会自动收缩u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eflex-wrap: warp-reverse;u002Fu002F反转,从默认的从上到下排列反转为从下到上。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eflex-direction:row; u002Fu002F从左至右一行一行进行子元素的排列u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eflex-direction:column; u002Fu002F从上到下一列一列进行子元素的排列u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eflex-direction:row-reverse; u002Fu002F从右至左一行一行进行子元素的排列u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eflex-direction:column-reverse; u002Fu002F从下到上一列一列进行子元素的排列u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E案例代码如下:u003Cu002Fpu003Eu003Cblockquoteu003E<!DOCTYPE html><html><head><meta charset=”UTF-8″><title>Document<u002Ftitle><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row-reverse;}.parent div{width: 20%;border:1px solid #ccc;background:pink;}<u002Fstyle><u002Fhead><body><div><div>1<u002Fdiv><div>2<u002Fdiv><div>3<u002Fdiv><div>4<u002Fdiv><div>5<u002Fdiv><div>6<u002Fdiv><u002Fdiv><u002Fbody><u002Fhtml>u003Cu002Fblockquoteu003Eu003Cp class=”ql-align-justify”u003E我们设置了flex-wrap: nowrap;(不换行,压缩所有的子元素在一行中显示),以及flex-direction: row-reverse;(反向排列)u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E代码效果如下:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fdaf6898c5a284ed19fb1982a0432b7df” img_width=”673″ img_height=”258″ alt=”如何通过css样式设置动画,转换,过渡等界面效果” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-justify”u003E如果设置为flex-wrap: warp(换行显示无法在一行显示的子元素),则效果如下:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F3c7d8e9e88f6430f9a4196fbf69bbd50″ img_width=”680″ img_height=”279″ alt=”如何通过css样式设置动画,转换,过渡等界面效果” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-justify”u003E如果将flex-direction: column;,则会纵向排列元素,效果如下图:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Ff80cf231ce4a4d4d8e15b045e55c283c” img_width=”680″ img_height=”279″ alt=”如何通过css样式设置动画,转换,过渡等界面效果” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-justify”u003E除了上面的这些给伸缩盒子父元素设置的样式之外,我们还可以可以伸缩盒子的子元素设置flex属性,用来设置平均分配整个父盒子的空间。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E代码如下:u003Cu002Fpu003Eu003Cblockquoteu003E<!DOCTYPE html><html><head><meta charset=”UTF-8″><title>Document<u002Ftitle><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div{flex:1;width: 20%;border:1px solid #ccc;background:pink;}<u002Fstyle><u002Fhead><body><div><div>1<u002Fdiv><div>2<u002Fdiv><div>3<u002Fdiv><div>4<u002Fdiv><u002Fdiv><u002Fbody><u002Fhtml>u003Cu002Fblockquoteu003Eu003Cp class=”ql-align-justify”u003E效果如下:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F2cad07b945b0415189abc0cb8df042c4″ img_width=”680″ img_height=”279″ alt=”如何通过css样式设置动画,转换,过渡等界面效果” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-justify”u003E如上图所示,每个盒子平均分配了父盒子的空间,原本宽度为20%,现在被拉伸了。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E除此之外,咱们还可以使用flex属性进行进一步的设置,代码如下:u003Cu002Fpu003Eu003Cblockquoteu003E<!DOCTYPE html><html><head><meta charset=”UTF-8″><title>Document<u002Ftitle><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div:nth-of-type(1){flex:1;border:1px solid #ccc;background:red;}.parent div:nth-of-type(2){flex:2;border:1px solid #ccc;background:green;}.parent div:nth-of-type(3){flex:2;border:1px solid #ccc;background:blue;}.parent div:nth-of-type(4){flex:1;border:1px solid #ccc;background:pink;}<u002Fstyle><u002Fhead><body><div><div>1<u002Fdiv><div>2<u002Fdiv><div>3<u002Fdiv><div>4<u002Fdiv><u002Fdiv><u002Fbody><u002Fhtml>u003Cu002Fblockquoteu003Eu003Cpu003E效果如下图:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fddf3b33d17f54afbbea1066cb955e1d3″ img_width=”680″ img_height=”279″ alt=”如何通过css样式设置动画,转换,过渡等界面效果” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cp class=”ql-align-justify”u003E我们分别给四个子盒子设置了flex:1 , flex:2, flex:2 ,flex:1.u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E这是什么意思呢?u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E四个flex加起来一共是6.那么第一个盒子就占据整个父盒子的1u002F6宽度。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E同理,另外三个盒子分别占据2u002F6,2u002F6,1u002F6的宽度,所以就形成了我们现在看到的效果。u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E原文来源于:黑马程序员社区u003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003E学习资源:u003Cu002Fpu003Eu003Cpu003E想学习css,可以关注:黑马程序员头条号,后台回复:cssu003Cu002Fpu003Eu003Cp class=”ql-align-justify”u003Eu003Cbru003Eu003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:如何通过css样式设置动画,转换,过渡等界面效果

主题测试文章,只做测试使用。发布者:程序员,转转请注明出处:http://www.cxybcw.com/26790.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code