在线建站培训
您的位置: 魔客吧 网页制作 CSS教程 查看内容

CSS3中的元素过渡属性transition

2017-8-2 08:20 | 发布者: moke | 栏目:CSS教程

W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

过渡transition

先来看一个小例子

?
1
<div class="demo"></div>
?
1
2
3
4
5
6
7
8
.demo {
    width: 100px;
    height: 100px;
    background-color: royalblue;
}
.demo:hover {
    width: 200px;
}

这样当我的光标悬浮在demo的一瞬间 

它的宽度变成了200px

有没有办法让我们光标悬浮在元素时,元素宽度缓慢变宽呢 

在CSS3之前我们只能使用麻烦的js脚本 

但是现在我们只需要添加一个属性 

就可以达到我们的目的

?
1
2
魔客吧温馨提示:如果你正在寻找织梦模板,那你可以到魔客吧的 织梦模板 频道看看,相信一定能找到你喜欢的!

最新分享资源

最新评论

验证码 换一个