关于CSS3 Transitions的小例子
这是个很简单关于css3Transitions的小例子。
下面按照效果我们来一个一个解说css代码。
1 网页的背景,网页的背景由两部分组成,image1 和斜线,这里面有个效果,背景图片用了两张图片,在css2.0的时候背景图片只能是一张,第二背景的自适应,网页大小。
对应代码如下
2 鼠标在菜单停留时候,动画效果
分布来:
当鼠标不放到菜单上面的效果,css实现 ——注:这里是把文字的颜色设置透明,然后设置文字的阴影,用文字的阴影来表现模糊效果
对应代码如下
当鼠标悬停时候发生的变化结果
对应如下
这俩个属性一定要把位置 放正确,
.bmenu:hover li a 先让所有的a变成灰色的阴影,然后在这些a中.bmenu li a:hover鼠标悬停的是白色,这样可以达到选中的效果。
在整个过程中Transitions属性扮演的角色是让,页面元素css属性中的变化,是延时完成的,这样达到了一个动画的效果
Transitions在IE中是不支持的,在IE中的效果是瞬间变成另一个css属性。
下面按照效果我们来一个一个解说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属性。
【关于CSS3 Transitions的小例子】相关文章
2. CSS3 Transitions, Transforms和Animation使用简介与应用展
3. Telefónica与Mozilla开拓基于HTML5互联网设备
7. MixItUp:基于CSS3 & jQuery的过滤和排序插件
10. MixItUp:基于CSS3 & jQuery的过滤和排序插件
本文来源:https://www.51html5.com/a880.html
上一篇:纯CSS实现的3D简洁按钮设计
下一篇:推荐13个CSS3快速开发工具
﹝关于CSS3 Transitions的小例子﹞相关内容
- 基于CSS3 & jQuery的过滤和排序插件
- CSS Transition (CSS过渡效果)入门
- 超可爱 纯CSS3实现的小猪、小老鼠、小牛
- CSS3 transition实现超酷图片墙动画效果
- CSS3 transition实现超酷图片墙动画效果
- 纯css3 transforms 3D文字翻开翻转3D开放式效果
- 使用 CSS3 Transforms 构建圆形导航
- 一款管理 CSS 动画的强大的小工具
- CSS 3D Transforms 实现书本效果
- 网站设计中使用CSS的注意事项