|
[tr][td]这是个很简单关于css3Transitions的小例子。
下面按照效果我们来一个一个解说css代码。 1 网页的背景，网页的背景由两部分组成，image1 和斜线，这里面有个效果，背景图片用了两张图片，在css2.0的时候背景图片只能是一张，第二背景的自适应，网页大小。 对应代码如下 [*]body{ [*] [*]background-color: transparent; [*] [*]background-repeat: repeat, no-repeat; [*] [*]background-position: center center; [*] [*]background-attachment: fixed; [*] [*]-webkit-background-size: auto, cover; [*] [*]-moz-background-size: auto, cover; [*] [*]-o-background-size: auto, cover; [*] [*]background-size: auto, cover; [*] [*] [*] [*]} 复制代码 2 鼠标在菜单停留时候，动画效果 分布来： 当鼠标不放到菜单上面的效果，css实现 ——注：这里是把文字的颜色设置透明，然后设置文字的阴影，用文字的阴影来表现模糊效果 对应代码如下 [*].bmenu li a{ [*] [*]color: transparent; [*] [*]display: block; [*] [*]text-transform: uppercase; [*] [*]text-shadow: 0px 0px 5px #fff; [*] [*]letter-spacing: 1px; [*] [*]-webkit-transition: all 0.3s ease-in-out; [*] [*]-moz-transition: all 0.3s ease-in-out; [*] [*]-o-transition: all 0.3s ease-in-out; [*] [*]-ms-transition: all 0.3s ease-in-out; [*] [*]transition: all 0.3s ease-in-out; [*] [*]} 复制代码 当鼠标悬停时候发生的变化结果 对应如下 [*].bmenu:hover li a{ [*] [*]text-shadow: 0px 0px 5px #0d1a3a; [*] [*]} [*] [*] [*] [*].bmenu li a:hover{ [*] [*]color: #fff; [*] [*]text-shadow: 0px 0px 1px #fff; [*] [*]padding-left: 10px; [*] [*]} 复制代码 这俩个属性一定要把位置 放正确， .bmenu:hover li a 先让所有的a变成灰色的阴影，然后在这些a中.bmenu li a:hover鼠标悬停的是白色，这样可以达到选中的效果。 在整个过程中Transitions属性扮演的角色是让，页面元素css属性中的变化，是延时完成的，这样达到了一个动画的效果 Transitions在IE中是不支持的，在IE中的效果是瞬间变成另一个css属性。 [/td][/tr] |
|
