APP下载

基于CSS3的图片画廊的设计与实现

2014-07-28陈纪霞

电脑知识与技术 2014年17期
关键词:动画变形

陈纪霞

摘要:CSS3的出现给WEB开发带来了革命性的影响,以前很多需要javascript实现的复杂效果,现在使用简单的CSS3就能实现。该文就利用CSS3实现了一个绚丽的图片画廊效果。

关键词:CSS3;图片画廊; 变形;动画

中图分类号: TP302.1 文献标识码:A 文章编号:1009-3044(2014)17-4115-03

在网页设计中,适当地使用动画或者渐变,可以把网页设计得更加生动和友好。在传统的设计中,通常会借助Flash或者JavaScript来实现动画,借助图片实现渐变,而CSS仅仅是静态地表现元素的效果。不过CSS3的出现将改变我们的思维方式,因为动画和渐变也可以直接用CSS3来实现。这些革命性的改变,使得CSS具有更强大的功能。

本文充分利用CSS3新增的transform属性,实现元素的旋转、缩放、移动、倾斜等变形效果,打破传统中规中举的排版局限,模拟一个图片画廊,随意地摆放,还原一种真实的感觉。

1 功能描述

该图片画廊在一个限定的区域范围内,摆放若干张图片,每张图片都有不同程度的旋转,并指定旋转的原点。鼠标经过图片时,图片会调整至正常的角度并放大显示;鼠标离开后,又会还原为原来的状态。在Firefox浏览器下预览的界面效果,如下图所示。

图1 图片画廊 图2 鼠标经过效果

2 实现方法

2.1 设计网页元素

在网页中以无序列表的形式添加几张图片,并为ul添加类选择器thumb ,HTML代码如下:

  • 风景图片1
  • 风景图片2
  • 风景图片3
  • 风景图片4
  • 风景图片5

2.2 设计基本的样式表

基本的样式表包括背景墙样式的设计和整体尺寸布局,链接显示为块级元素,以方便变形和布局。

html, body, ul.thumb, ul.thumb li {

padding: 0;

margin: 0;

} /* 将各元素的外边距和内边距都设置为0 */

html, body, ul.thumb {

width: 100%;

height: 100%;

overflow: hidden;

} /* 溢出的部分隐藏 */

ul.thumb {

position: relative;

list-style: none;

background: -webkit-gradient(radial, 45 45, 50, 50 10, 640, from(#444), to(#333)) !important;

background: url(../images/bark.jpg) repeat; /* 设置背景墙的样式,在webkit核心浏览器下使用渐变效果,其它浏览器显示背景图片 */

}

ul.thumb li {

position: absolute;

top: 50%;

left: 50%; /* 设置子元素li相对于父元素ul绝对定位 */

padding: 6px 6px 24px 6px;

background: #FFF;

width: 150px;

height: 130px; /* 设置原始图片大小 */

-moz-box-shadow:1px 1px 6px #222;

-webkit-box-shadow:1px 1px 6px #222;

box-shadow:1px 1px 6px #222; /* 设置盒子阴影,使其产生立体效果 */

-webkit-transition: all 3s ease-in-out; /* 实现3S的平滑过渡*/

z-index: 0; /* 图片在Z轴上的起始位置 */

}

2.3 变形样式表的设计

设计出随意摆放的图片效果。首先设置所有的链接默认的倾斜,并自定义变形原点,同时加入动画过渡效果。使用CSS选择器设置不一样的旋转角度。

ul.thumb li img {

width: 100%;

height: 100%;

}/* 设置各图片的起始位置和变形原点,并加入动画过渡效果 */

ul.thumb li:nth-child(1) {

margin-top: -130px;

margin-left: -130px;

-moz-transform: rotate(30deg);

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

-webkit-filter: blur(5px);

}ul.thumb li:nth-child(2) {

margin-top: -150px;

margin-left:60px;

-moz-transform: rotate(19deg);

-webkit-transform: rotate(19deg);

transform: rotate(19deg);

-webkit-filter: blur(4px);

}ul.thumb li:nth-child(3) {

margin-top: -10px;

margin-left: -180px;

-moz-transform: rotate(-10deg);

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

-webkit-filter: blur(3px);

}ul.thumb li:nth-child(4) {

margin-top: -100px;

margin-left: -40px;

-moz-transform: rotate(12deg);

-webkit-transform: rotate(12deg);

transform: rotate(12deg);

-webkit-filter: blur(2px);

}ul.thumb li:nth-child(5) {

margin-top: 20px;

margin-left: 30px;

-moz-transform: rotate(-20deg);

-webkit-transform: rotate(-20deg);

transform: rotate(-20deg);

-webkit-filter: blur(1px);

}

2.4 鼠标滑过时的效果实现

当鼠标滑过图片时,图片调整为正常角度并放大显示。

ul.thumb li:hover{

z-index: 10; /* 鼠标滑过图片时,将其顶层显示 */

width: 380px;

height: 222px; /* 放大图像尺寸 */

margin-top: -120px;

margin-left: -160px; /* 定位图片显示位置 */

-moz-box-shadow:8px 8px 24px #111;

-webkit-box-shadow:8px 8px 24px #111;

box-shadow:8px 8px 24px #111; /* 放大盒子阴影效果 */

-moz-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-webkit-filter: blur(0px);

transform: rotate(0deg); /* 设置旋转角度为零,使其正常角度显示 */

}

3 结束语

本文所设计的图片画廊、代码简单,具有良好的扩展性,用户可以根据自己的实际需要添加相关的Javascript语句,便能实现一款功能上为自己量身定做的图片画廊。

参考文献:

[1] 张晓景.DIV+CSS3.0网页样式与布局经典范例[M].北京:电子工业出版社,2012.

[2] 曾顺.精通CSS+DIV网页样式与布局[M].北京:人民邮电出版社,2010.

[3] 张俊兰,刘翼,铁宏军.基于CSS技术的网页设计应用研究[J].延安大学学报,2010,3(29).

[4] 胡江汇,宋兴.下一代Web标准之CSS3核心技术研究[J].黑龙江科技信息,2012(14).

[5] 何丽.基于CSS3.0技术的网页元素效果[J].软件导刊,2011(8).endprint

-moz-transform: rotate(30deg);

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

-webkit-filter: blur(5px);

}ul.thumb li:nth-child(2) {

margin-top: -150px;

margin-left:60px;

-moz-transform: rotate(19deg);

-webkit-transform: rotate(19deg);

transform: rotate(19deg);

-webkit-filter: blur(4px);

}ul.thumb li:nth-child(3) {

margin-top: -10px;

margin-left: -180px;

-moz-transform: rotate(-10deg);

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

-webkit-filter: blur(3px);

}ul.thumb li:nth-child(4) {

margin-top: -100px;

margin-left: -40px;

-moz-transform: rotate(12deg);

-webkit-transform: rotate(12deg);

transform: rotate(12deg);

-webkit-filter: blur(2px);

}ul.thumb li:nth-child(5) {

margin-top: 20px;

margin-left: 30px;

-moz-transform: rotate(-20deg);

-webkit-transform: rotate(-20deg);

transform: rotate(-20deg);

-webkit-filter: blur(1px);

}

2.4 鼠标滑过时的效果实现

当鼠标滑过图片时,图片调整为正常角度并放大显示。

ul.thumb li:hover{

z-index: 10; /* 鼠标滑过图片时,将其顶层显示 */

width: 380px;

height: 222px; /* 放大图像尺寸 */

margin-top: -120px;

margin-left: -160px; /* 定位图片显示位置 */

-moz-box-shadow:8px 8px 24px #111;

-webkit-box-shadow:8px 8px 24px #111;

box-shadow:8px 8px 24px #111; /* 放大盒子阴影效果 */

-moz-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-webkit-filter: blur(0px);

transform: rotate(0deg); /* 设置旋转角度为零,使其正常角度显示 */

}

3 结束语

本文所设计的图片画廊、代码简单,具有良好的扩展性,用户可以根据自己的实际需要添加相关的Javascript语句,便能实现一款功能上为自己量身定做的图片画廊。

参考文献:

[1] 张晓景.DIV+CSS3.0网页样式与布局经典范例[M].北京:电子工业出版社,2012.

[2] 曾顺.精通CSS+DIV网页样式与布局[M].北京:人民邮电出版社,2010.

[3] 张俊兰,刘翼,铁宏军.基于CSS技术的网页设计应用研究[J].延安大学学报,2010,3(29).

[4] 胡江汇,宋兴.下一代Web标准之CSS3核心技术研究[J].黑龙江科技信息,2012(14).

[5] 何丽.基于CSS3.0技术的网页元素效果[J].软件导刊,2011(8).endprint

-moz-transform: rotate(30deg);

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

-webkit-filter: blur(5px);

}ul.thumb li:nth-child(2) {

margin-top: -150px;

margin-left:60px;

-moz-transform: rotate(19deg);

-webkit-transform: rotate(19deg);

transform: rotate(19deg);

-webkit-filter: blur(4px);

}ul.thumb li:nth-child(3) {

margin-top: -10px;

margin-left: -180px;

-moz-transform: rotate(-10deg);

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

-webkit-filter: blur(3px);

}ul.thumb li:nth-child(4) {

margin-top: -100px;

margin-left: -40px;

-moz-transform: rotate(12deg);

-webkit-transform: rotate(12deg);

transform: rotate(12deg);

-webkit-filter: blur(2px);

}ul.thumb li:nth-child(5) {

margin-top: 20px;

margin-left: 30px;

-moz-transform: rotate(-20deg);

-webkit-transform: rotate(-20deg);

transform: rotate(-20deg);

-webkit-filter: blur(1px);

}

2.4 鼠标滑过时的效果实现

当鼠标滑过图片时,图片调整为正常角度并放大显示。

ul.thumb li:hover{

z-index: 10; /* 鼠标滑过图片时,将其顶层显示 */

width: 380px;

height: 222px; /* 放大图像尺寸 */

margin-top: -120px;

margin-left: -160px; /* 定位图片显示位置 */

-moz-box-shadow:8px 8px 24px #111;

-webkit-box-shadow:8px 8px 24px #111;

box-shadow:8px 8px 24px #111; /* 放大盒子阴影效果 */

-moz-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-webkit-filter: blur(0px);

transform: rotate(0deg); /* 设置旋转角度为零,使其正常角度显示 */

}

3 结束语

本文所设计的图片画廊、代码简单,具有良好的扩展性,用户可以根据自己的实际需要添加相关的Javascript语句,便能实现一款功能上为自己量身定做的图片画廊。

参考文献:

[1] 张晓景.DIV+CSS3.0网页样式与布局经典范例[M].北京:电子工业出版社,2012.

[2] 曾顺.精通CSS+DIV网页样式与布局[M].北京:人民邮电出版社,2010.

[3] 张俊兰,刘翼,铁宏军.基于CSS技术的网页设计应用研究[J].延安大学学报,2010,3(29).

[4] 胡江汇,宋兴.下一代Web标准之CSS3核心技术研究[J].黑龙江科技信息,2012(14).

[5] 何丽.基于CSS3.0技术的网页元素效果[J].软件导刊,2011(8).endprint

猜你喜欢

动画变形
Clifford hits the big screen
做个动画给你看
动画发展史
谈诗的变形
我的动画梦
“我”的变形计
动画批评融入动画教育的思考
变形巧算
例谈拼图与整式变形
会变形的饼