用css硬币翻转怎么让第二张照片翻转后市镜面的

html-css026

用css硬币翻转怎么让第二张照片翻转后市镜面的,第1张

以下是引用片段:

#imgmenu{

width: 450px

height: 25px/*高度是背景图片的一半*/

background: url(/imagelist/06/43/473648jpj0j1.gif)

list-style-type: none

padding: 0px

margin: 0px

}

#imgmenu li{

float: left

}

#imgmenu li a{

display: block

width: 90px

height: 25px

}

#imgmenu li#home a:hover,#activeh{

background: url(/imagelist/06/43/473648jpj0j1.gif) 0 -25px

/*翻转时背景图的位置,左边0px,顶部-25px,

背景图的下半部分,下同*/

}

#imgmenu li#about a:hover,#activea{

background: url(/imagelist/06/43/473648jpj0j1.gif) -90px -25px

/*第二个菜单的位置距左边90px,

每个菜单的宽度是90px*/

}

#imgmenu li#pro a:hover,#activep{

background: url(/imagelist/06/43/473648jpj0j1.gif) -180px -25px

}

#imgmenu li#faq a:hover,#activef{

background: url(/imagelist/06/43/473648jpj0j1.gif) -270px -25px

}

#imgmenu li#contact a:hover,#activec{

background: url(/imagelist/06/43/473648jpj0j1.gif) -360px -25px

}

创建动画序列,需要使用animation属性或其子属性,该属性允许配置动画时间、时长以及其他动画细节,但该属性不能配置动画的实际表现,动画的实际表现是由 @keyframes规则实现,具体情况参见使用keyframes定义动画序列小节部分。

transition也可实现动画。transition强调过渡,是元素的一个或多个属性发生变化时产生的过渡效果,同一个元素通过两个不同的途径获取样式,而第二个途径当某种改变发生(如hover)时才能获取样式,这样就会产生过渡动画。