HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 实例代码 查看内容

5个基于css3超炫的鼠标滑动按钮动画

2015-1-31 11:17| 发布者: html5cn| 查看: 13028| 评论: 0|原作者: 爱编程|来自: www.w2bc.com

摘要: 今天给大家分享5个基于css3超炫的鼠标滑动按钮动画。这5个按钮鼠标经过的时候有超炫的动画效果。这5个按钮适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。 ...

今天给大家分享5个基于css3超炫的鼠标滑动按钮动画。这5个按钮鼠标经过的时候有超炫的动画效果。这5个按钮适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下:

在线预览

5个基于css3超炫的鼠标滑动按钮动画.rar

实现的代码。

html代码:

  1. <div id="wrap">
  2.         <a href="#" class="btn-slide"><span class="circle"><i class="fa fa-rocket"></i></span>
  3.             <span class="title">火箭</span> <span class="title-hover">带你飞</span> </a><a href="#"
  4.                 class="btn-slide2"><span class="circle2"><i class="fa fa-download"></i></span><span
  5.                     class="title2">下载</span> <span class="title-hover2">点击下载</span> </a>
  6.     </div>
  7.     <link rel="stylesheet" type="text/css" href="css/btn2.css">
  8.     <div class="container1">
  9.         <div class="con_down1">
  10.             <i class="fa fa-download fa-2x"></i>
  11.             <h4>
  12.                 Download Now</h4>
  13.         </div>
  14.         <div class="con_sizes1">
  15.             <div class="sizes1">
  16.                 <h5 class="size1">
  17.                     34.5 MB</h5>
  18.                 <div class="sizes_abs1">
  19.                 </div>
  20.             </div>
  21.         </div>
  22.     </div>
  23.     <div class="container2">
  24.         <div class="con_down2">
  25.             <i class="fa fa-download fa-2x"></i>
  26.             <h4>
  27.                 Download now</h4>
  28.         </div>
  29.         <div class="con_sizes2">
  30.             <div class="sizes2">
  31.                 <h5 class="size2">
  32.                     34.5 MB</h5>
  33.                 <div class="sizes_abs2">
  34.                 </div>
  35.             </div>
  36.         </div>
  37.     </div>
  38.     <div>
  39.         <br />
  40.         <br />
  41.     </div>
  42.     <link rel="stylesheet" type="text/css" href="css/btn3.css">
  43.     <div class="center">
  44.         <a class="spinningeffect" href="#" target="_blank">
  45.             <img src="img/blogger-logo1.jpg" />
  46.         </a>
  47.     </div>
  48.     <div>
  49.         <br />
  50.     </div>
  51.     <link rel="stylesheet" type="text/css" href="css/focus.css">
  52.     <div class="center">
  53.         <a class="zoomeffect" href="#" target="_blank">
  54.             <img src="img/addfocus.jpg" /></a>
  55.     </div>
  56.     <div>
  57.         <br />
  58.     </div>
  59.     <link rel="stylesheet" type="text/css" href="css/btn4.css">
  60.     <div class="mudwnpbutton center">
  61.         <a href="#" target="blank" rel="nofollow">预览</a>
  62.     </div>
  63.     <link rel="stylesheet" type="text/css" href="css/btn5.css">
  64.     <div class="whitebuttondemo">
  65.         <a href="#">button</a> <span class="up">message</span>
  66.     </div>
  67.     <div>
  68.         <br />
  69.         <br />
  70.     </div>
  71.     <div class="whitebutton">
  72.         <a href="#">button</a> <span class="up">top message</span> <span class="down">1.6MB
  73.             .rar </span>
  74.     </div>
  75.     <div>
  76.     </div>
复制代码
via:http://www.w2bc.com/Article/19453
更多

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-6-25 11:28

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部