设为首页 - 加入收藏 - 网站地图 SecYe安全 Www.SecYe.Com - 国内网络信息安全IT技术门户网
当前位置:SecYe > 网页设计 > HTML/XHTML > 正文

CSS3 Flexbox中动画内幕

时间:2013-05-04 02:34 来源:未知 作者:www.secye.com 阅读:

最近我在致力于弹性盒模型(flexbox)、动画(animations)和过渡(transition)几个属性的组合运用。我得出一个结论, 对于简单的手风琴UI效果(如下图所示),这可能是非常有用的。当然,它不能在所有浏览器下正常的工作,但是你可以使用Modernizr库来支持那些老 式的浏览器。

\"Flexbox中动画内幕\"

使用flexbox、transitions和一点javascript制作的一个简单的手风琴UI效果,具体效果可以点击这里查看。

接下来我们一起来探索。

一个简单无味的测试

在最初的测试中,我创建了一个简单的结构,在

标签中包含了三个
标签,如下所示:

 

 

我使用的CSS如下所示:

section {

display: -webkit-flex;

display: -moz-flex;

display: -ms-flex;

display: flex;

}

 

article {

height: 300px;

/*伸缩项目该占用的剩余空间比例:1/3*/

-webkit-flex: 1;

-moz-flex: 1;

-ms-flex: 1;

flex: 1;

border: 1px solid black;

-webkit-transition: 1s all;

-moz-transition: 1s all;

-ms-transition: 1s all;

transition: 1s all;

}

 

article:hover {

/*伸缩项目该占用的剩余空间比例:2/3*/

-webkit-flex: 2;

-moz-flex: 2;

-ms-flex: 2;

flex: 2;

}

 

很高兴的看到上面的例子在opera和chrome下运行的很完美(firefox和IE不支持flexbox的新语法),鼠标悬浮 在上时能平滑的扩大,相邻的也能自动的缩小适合

容器大小。如果你想看到效果,请使用 oprea和chrome浏览器狠狠的点击这里

一个更好看的flexbox过渡例子

根据上面的例子,我创建了一个更好看的例子(如下图所示),我们继续往下玩。

\"Flexbox中动画内幕\"

flexbox和transition创建的一个简单的手风琴UI效果,点击这里查看效果。

HTML结构基本上相同,除了添加更多的内容之外,在以前的基础上增加了几个标签,大约从三个变成了五个,另外 把

标签删除了,直接使用标签来代替了
标签来做为外面的容器。我使 用下面的样式制作出同样效果的手风琴(加了一些基本的文字样式,为了简便而在这里省略没显示出来):

body {

margin: 0 auto;

display: -webkit-flex;

display: -moz-flex;

display: -ms-flex;

display: flex;

}

 

article {

-webkit-flex: 1 0;

-moz-flex: 1 0;

-ms-flex: 1 0;

flex: 1 0;

-webkit-transition: 1s all;

-moz-transition: 1s all;

-ms-transition: 1s all;

transition: 1s all;

overflow: hidden;

height: 550px;

color: rgba(0,0,0,1);

}

 

article:hover {

-webkit-flex: 1 600px;

-moz-flex: 1 600px;

-ms-flex: 1 600px;

flex: 1 600px;

color: rgba(0,0,0,1);

}

 

为了大家更好的看到整个效果使用的样式代码,我将所有代码全部贴在此处,以供大家参考:

html {

font-size: 10px;

font-family: sans-serif;

}

 

h2 {

font-size: 3.2rem;

display: none;

}

 

p {

font-size: 1.4rem;

}

 

body {

 

margin: 0 auto;

 

display: -webkit-flex;

display: -moz-flex;

display: flex;

}

 

article {

-webkit-flex: 1 0;

-moz-flex: 1 0;

flex: 1 0;

 

margin: 0.5rem;

padding: 1rem;

border-radius: 1rem;

color: rgba(0,0,0,0);

 

background: -webkit-linear-gradient(top left,rgba(0,0,0,0),rgba(0,0,0,0.4));

background: -moz-linear-gradient(top left,rgba(0,0,0,0),rgba(0,0,0,0.4));

background: -ms-linear-gradient(top left,rgba(0,0,0,0),rgba(0,0,0,0.4));

background: linear-gradient(to bottom right,rgba(0,0,0,0),rgba(0,0,0,0.4));

 

-webkit-transition: 1s all;

-moz-transition: 1s all;

-o-transition: 1s all;

transition: 1s all;

 

overflow: hidden;

height: 550px;

}

 

article:hover {

-webkit-flex: 1 600px;

-moz-flex: 1 600px;

flex: 1 600px;

 

color: rgba(0,0,0,1);

}

 

article:nth-child(2n) {

background-color: #f00;

}

 

article:nth-child(2n+1) {

background-color: #aaf;

}

 

——大漠

注:这里把标题h2隐藏了,那是因为flex动画在小窗口听情况之下会存在一个问题,无法自动的扩展列表的宽度。但不用担心,我将会在后面的文章中介绍如何解决这个问题。

一个animation/flexbox的例子

接下来试着创建一个类似的例子,但这个例子中是使用javacript制作的动画效果,并且运用到

本文来源:SecYe安全网[http://www.secye.com] (责任编辑:SecYe安全)

点击复制链接 与好友分享!

顶一下
(0)
0%
踩一下
(0)
0%