鼠标悬浮于div图层出现css3渐变动画效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS3 Menu</title> <style type="text/css"> *{ margin:0; padding:0; box-sizing: } body{ background:#CCCAA1; font-family: sans-serif; } ul li{ list-style:none; } h1{ padding:15px 0 25px 0; text-align:center; font-size:2.2em; } #wrap{ width: 728px; margin: 60px auto; background: #fff; padding: 10px; height: 280px; border:12px solid #DDE0CA; } .nav{ overflow:hidden; margin:0 auto; width:750px; } .nav li{ width:145px; height:180px; display:inline-block; float:left; cursor:pointer; transition:all 0.4s; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; } .nav li:hover{ opacity:1; height:190px; } .nav li.hm:hover{ border-bottom:4px solid rgba(11, 132, 138, 1); } .nav li.fb:hover{ border-bottom:4px solid rgba(241, 83, 70, 1); } .nav li.gp:hover{ border-bottom:4px solid rgba(32, 16, 49, 1); } .nav li.tw:hover{ border-bottom:4px solid rgba(228, 148, 7, 1); } .nav li.cl:hover{ border-bottom:4px solid rgba(67, 138, 15, 1); } img.ico{ background:rgba(255, 255, 255, 0.4); padding:14px; border-radius:100%; margin:30px auto; display:block; transition:all 0.8s; -webkit-transition:all 0.8s; -moz-transition:all 0.8s; box-shadow: 0 0 0 30px rgba(255,255,255,0.1); -webkit-box-shadow: 0 0 0 10px rgba(255,255,255,0.1); } .nav li:hover img.ico{ background:rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 10px rgba(255,255,255,0.8); -webkit-box-shadow: 0 0 0 0 rgba(255,255,255,0.8); } 更多资料免费分享加群 120342833 验证回答 ZZ .nav li span{ text-align:center; display:block; padding-top:10px; color:rgba(255, 255, 255, 1); font-size:0.9em; transition:padding-top 0.4s; -webkit-transition:padding-top 0.4s; } .nav li:hover span{ padding-top:20px; } .hm{ background:rgba(29, 162, 168, 0.8); } .fb{ background:rgba(255, 89, 76, 0.8); } .gp{ background:rgba(47, 31, 64, 0.8); } .tw{ background:rgba(254, 162, 14, 0.8); } .cl{ background:rgba(93, 181, 29, 0.8); } </style> </head>

<body>

CSS3 Menu

  • Home
  • Facebook
  • Google-plus
  • Twitter
  • Call

</body> </html>

跟帖

地球日之际,课工场回馈新老学员,推出充值送k币和优惠券的活动,让你杯盆钵满,物超所值,实惠多多,具体详情抓紧时间,找群主咨询,搜WEB前端互动交流群04

沙发
说几句
广告位 点击查看投放指南

我的收藏