什么是 CSS3 过渡以及如何使用它

发布日期:2015-09-09 14:26:18
我们在给超链接设置样式时,一般都会设置一个悬停状态(hover)的效果,这种方法能
明显地提醒用户他的鼠标指向的是一个超链接。虽然对越来越多的触摸屏设备没太大用处,但不管怎么说,这种方法对网站和用户之间的交互是非常简单实用的。
通常,使用 CSS 时悬停状态就是一个开关。它默认有一个状态,然后在鼠标悬停时马上
切换到另一种状态。但是使用 CSS3过渡,正如其名字所暗示的,可以让元素从一种状态
慢慢转换到另一种状态。这种转换并不局限于悬停状态,但可以从悬停讲起。
在上一章中,我们使用 CSS3制作了一个有红色渐变背景的按钮。所使用的 CSS3代码如
下(为简洁起见省略了浏览器私有前缀) :
#content a {
text-decoration: none;
font: 2.25em /* 36px ÷ 16 */ 'BebasNeueRegular';
background-color: #b01c20;
border-radius: 8px;
color: #ffffff;
padding: 3%;
float: left;
background: linear-gradient(90deg, #b01c20 0%, #f15c60 100%);
margin-top: 30px;
box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);
text-shadow: 0px 1px black;
border: 1px solid #bfbfbf;
}
我们来给按钮增加一个悬停效果:
#content a:hover {
border: 1px solid #000000;
color: #000000;
text-shadow: 0px 1px white;
}
两种状态下的效果如下,先看默认状态:
什么是 CSS3 过渡以及如何使用它什么是 CSS3 过渡以及如何使用它
这里只是在鼠标悬停时简单地修改了一下文字、文字阴影以及边框的颜色。所以,你可
能想象出来,使用这段 CSS 代码,当鼠标悬停在按钮上面时,按钮会直接从第一种状态
(白色文字)突变到第二种状态(黑色文字)——就是一个开关效果。我们来给第一段
CSS规则添加一点 CSS3魔法:
#content a {
/*……原来的样式……*/
transition: all 1s ease 0s;
}
现在再把鼠标悬停在按钮上,文字、文字阴影和边框阴影的颜色都会从第一种状态平滑
过渡到第二种状态。注意,北京网站设计里把过渡应用到了元素而不是悬停状态上。这样做是为了
让元素的其他状态(如 :active )也能设置不同的样式并拥有类似的效果。所以请记住,
过渡声明要放在过渡效果开始的元素上。

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计