5个基于css3超炫的鼠标滑动按钮动画
今天给大家分享5个基于css3超炫的鼠标滑动按钮动画。这5个按钮鼠标经过的时候有超炫的动画效果。这5个按钮适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下:
实现的代码。
html代码:
<div id="wrap">
<a href="#" class="btn-slide"><span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">火箭</span> <span class="title-hover">带你飞</span> </a><a href="#"
class="btn-slide2"><span class="circle2"><i class="fa fa-download"></i></span><span
class="title2">下载</span> <span class="title-hover2">点击下载</span> </a>
</div>
<link rel="stylesheet" type="text/css" href="css/btn2.css">
<div class="container1">
<div class="con_down1">
<i class="fa fa-download fa-2x"></i>
<h4>
Download Now</h4>
</div>
<div class="con_sizes1">
<div class="sizes1">
<h5 class="size1">
34.5 MB</h5>
<div class="sizes_abs1">
</div>
</div>
</div>
</div>
<div class="container2">
<div class="con_down2">
<i class="fa fa-download fa-2x"></i>
<h4>
Download now</h4>
</div>
<div class="con_sizes2">
<div class="sizes2">
<h5 class="size2">
34.5 MB</h5>
<div class="sizes_abs2">
</div>
</div>
</div>
</div>
<div>
<br />
<br />
</div>
<link rel="stylesheet" type="text/css" href="css/btn3.css">
<div class="center">
<a class="spinningeffect" href="#" target="_blank">
<img src="img/blogger-logo1.jpg" />
</a>
</div>
<div>
<br />
</div>
<link rel="stylesheet" type="text/css" href="css/focus.css">
<div class="center">
<a class="zoomeffect" href="#" target="_blank">
<img src="img/addfocus.jpg" /></a>
</div>
<div>
<br />
</div>
<link rel="stylesheet" type="text/css" href="css/btn4.css">
<div class="mudwnpbutton center">
<a href="#" target="blank" rel="nofollow">预览</a>
</div>
<link rel="stylesheet" type="text/css" href="css/btn5.css">
<div class="whitebuttondemo">
<a href="#">button</a> <span class="up">message</span>
</div>
<div>
<br />
<br />
</div>
<div class="whitebutton">
<a href="#">button</a> <span class="up">top message</span> <span class="down">1.6MB
.rar </span>
</div>
<div>
</div>
via:http://www.w2bc.com/Article/19453
5个基于css3超炫的鼠标滑动按钮动画的更多相关文章
- 一款基于css3的简单的鼠标悬停按钮
今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 9款基于CSS3 Transitions实现的鼠标经过图标悬停特效
之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...
- 一款基于css3非常实用的鼠标悬停特效
今天给大家带来一款基于css3非常实用的鼠标悬停特效.这款特效,当鼠标经过时候一个半透明的遮罩层倒下来.效果很好,而且是纯css3实现的,代码很少,非常实用. 效果如下: 在线预览 源码下载 实现 ...
- 一款基于jquery超炫的图片切换特效
今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览 源码下载 来看下实现的 ...
- 一款基于jquery超炫的弹出层提示消息
今天给大家带来一款基于jquery超炫的弹出层提示消息.这款实例页面初始时,一个go按钮.当单击go按钮时,提示强出层以动画形式出现.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- 我用 CSS3 实现了一个超炫的 3D 加载动画
今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...
- CSS3超酷移动手机滑动隐藏側边栏菜单特效
这是一组共4种效果很炫酷的CSS3移动手机滑动隐藏側边栏菜单特效. 这四种效果各自是:默认的点击滑动側边栏菜单效果.带3D transforms的滑动側边栏效果.文字缩放和淡入淡出效果的滑动側边栏以及 ...
- Swift:超炫的View Controller切换动画
匿名社交应用Secret的开发者开发了一款叫做Ping的应用,用户可以他们感兴趣的话题的推送. Ping有一个很炫的东西,就是主界面和之间切换的动画做的非常的好.每次看到一个非常炫的动画,都不由得会想 ...
- 【笔记JS/HTML/CSS】CSS3实现鼠标滑动显示动画(transition、transform)
内容中包含 base64string 图片造成字符过多,拒绝显示
随机推荐
- Hadoop2.2.0 自动切换HA环境搭建
自动切换的HA,比手动切换HA集群多了一个zookeeper集群 机器分配: zookeeper:hadoop4,hadoop5,hadoop6 namenode:hadoop4,hadoop5 da ...
- 流式计算之Storm简介
Storm是一个分布式的.容错的实时计算系统,遵循Eclipse Public License 1.0,Storm可以方便地在一个计算机集群中编写与扩展复杂的实时计算,Storm之于实时处理,就好比H ...
- Android将ScrollView移动到最底部
转载地址:http://hi.baidu.com/gaogaf/item/36e8a4c8ac6ba31050505848 scrollTo方法可以调整view的显示位置.在需要的地方调用以下方法即可 ...
- Node.js V0.12 新特性之性能优化
v0.12悠长的开发周期(已经过去九个月了,并且还在继续,是有史以来最长的一次)让核心团队和贡献者们有充分的机会对性能做一些优化. 本文会介绍其中最值得注意的几个. http://www.infoq. ...
- 第二百二十四天 how can I 坚持
实物商品兑换,有点小难搞,其实也没什么难的,也就那些东西,不过好像这就是我设计实现的,干起来挺来劲的. 供暖了,挺暖和的,哈哈. 小米耳机(炫彩版)到了.感觉挺好的. 还在纠结到底要买哪种颜色的羽绒服 ...
- MyEclipse中消除frame引起的“the file XXX can not be found.Please check the location and try again.”的错误
读者如要转载,请标明出处和作者名,谢谢. 地址01:http://space.itpub.net/25851087 地址02:http://www.cnblogs.com/zjrodger/ 作者名: ...
- uestc oj 1218 Pick The Sticks (01背包变形)
题目链接:http://acm.uestc.edu.cn/#/problem/show/1218 给出n根木棒的长度和价值,最多可以装在一个长 l 的容器中,相邻木棒之间不允许重叠,且两边上的木棒,可 ...
- HDU1712简单的分组背包
HDU1712http://acm.hdu.edu.cn/showproblem.php?pid=1712 简单的分组背包 #include <map> #include <set& ...
- LOTUS 迁移到Exchange 2010 POC 之在Exchange 2007 安装Lotus Admin!
双击Setup安装:
- iOS国际化多语言设置
一.创建工程.添加语言