江西时时彩app下载:您现在的位置: 江西时时彩app下载 > 站长学院 > 建站教程 >

CSS hover背景/文字渐变效果

来源:未知 发布时间:2013-09-27热度: ℃我要评论
就不作其他解释了,直接上代码了,可以先试试效果,然后修改下颜色代码就行了。大多数特效都是由CSS3完成的,唯一缺点就是兼容性,想要追求效果,就要失去兼容性。CSS3的Transition属性,这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,...

江西时时彩app下载 www.p42ci.com.cn

就不作其他解释了,直接上代码了,可以先试试效果,然后修改下颜色代码就行了。
大多数特效都是由CSS3完成的,唯一缺点就是兼容性,想要追求效果,就要失去兼容性。CSS3的Transition属性,这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
transition:颜色 变换延续的时间 变换速率 
transition:background-color 0.3s linear

变换速率:
1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).
 
2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).
 
3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).
 
4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).
 
5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
 
6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。


//Mozilla内核
-moz-transition :
//Webkit内核
-webkit-transition :
//Opera
-o-transition :
//W3C 标准
transition :
案例展示:红色部分就是代码,复制过去试试效果。
.nav li {display:block;float:left;-webkit-transition:background-color 0.3s linear;-moz-transition:background-color 0.3s linear;-o-transition:background-color 0.3s linear;transition:background-color 0.3s linear;}
.nav li:hover {background:#454648}
.nav li a {padding:0 25px;margin-left:3px;display:block;float:left;font-size:14px;color:#8C8C8C;-webkit-transition:color 0.3s linear;-moz-transition:color 0.3s linear;-o-transition:color 0.3s linear;transition:color 0.3s linear;} .nav li a:hover {font-size:14px;color:#fff;}

本文地址://www.p42ci.com.cn/news/302.html

    相关阅读

  • 张岂之:侯外庐翻译《资本论》 用马克思理论研究中国史 2018-11-14
  • 老年人社保年审如何更便利 2018-11-14
  • 端午小长假我市旅游总收入同比增20.5% 2018-11-13
  • 《社会科学辑刊》编辑部成功举办“改革开放四十年中国哲学研究的回顾与反思”学术研讨会 2018-11-13
  • 定陶战役:示弱于敌重点围歼的范例 2018-11-12
  • 中央再曝50名外逃人员藏匿线索 不少人级别高、影响大 2018-11-12
  • 澳媒编辑被诉诽谤华裔商人 庭审闪烁其词状态窘迫 2018-11-12
  • 习近平应约同俄罗斯总统普京通电话 2018-11-12
  • 没考上?没关系。其它学校也能培养建设国家的人才,清华只是名气大点。 2018-11-11
  • 侵华日军513部队首被发现 日本老兵:主做细菌研究 2018-11-11
  • 工人农民为主要组成部分的全国人民代表大会,决定全国的一切,是什么时代? 2018-11-11
  • 《2016年社会治理舆情报告》在京发布 2018-11-10
  • 周纪龙:为262名残疾人的幸福领路 2018-11-10
  • 世贸组织总干事呼吁加强全球合作缓和贸易紧张局势 2018-11-10
  • 【没有青年,难得“里子”】人民日报:传承文脉,让乡村振兴有“面子”也有“里子” 2018-11-09
  • 930| 722| 129| 697| 698| 365| 231| 730| 682| 607|