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 图片造成字符过多,拒绝显示
随机推荐
- 深入理解HBase Memstore
2013/08/09 转发自http://www.cnblogs.com/shitouer/archive/2013/02/05/configuring-hbase-memstore-what-you ...
- geeksforgeeks@ Equal to product (Binary Search)
http://www.practice.geeksforgeeks.org/problem-page.php?pid=667 Equal to product Given an array of in ...
- pku3664 Election Time
http://poj.org/problem?id=3664 水题 #include <stdio.h> #include <map> using namespace std; ...
- Linux下的grep搜索命令详解(一)
Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...
- Linux下的设置静态IP命令详解
网络配置的配置文件在/etc/sysconfig/network-scripts/下,文件名前缀为ifcfg-后面跟的就是网卡的名称,可以通过双TAB键查看然后编辑,也可以使用ifconfig查看,也 ...
- js实现异步循环
@(编程) 问题 实现异步循环时,你可能会遇到问题. 让我们试着写一个异步方法,每秒打印一次循环的索引值. for(var i = 0; i < 5; i++) { setTimeout(fun ...
- Ubuntu安装Burg
友情提示:本文只介绍了如何安装Burg,没有关于卸载Burg的相关说明.事实上,我后来直接新装了12.04,我没有卸载Burg的经验.考虑到Burg事关系统引导的大事,安装的话按本文来做应该没有问题, ...
- MySQL 查看表结构简单命令。
一.简单描述表结构,字段类型 desc tabl_name; 显示表结构,字段类型,主键,是否为空等属性,但不显示外键. 二.查询表中列的注释信息 select * from information_ ...
- CCF 201403-2 窗口 (STL模拟)
问题描述 在某图形操作系统中,有 N 个窗口,每个窗口都是一个两边与坐标轴分别平行的矩形区域.窗口的边界上的点也属于该窗口.窗口之间有层次的区别,在多于一个窗口重叠的区域里,只会显示位于顶层的窗口里的 ...
- POJ 3170 Knights of Ni (暴力,双向BFS)
题意:一个人要从2先走到4再走到3,计算最少路径. 析:其实这个题很水的,就是要注意,在没有到4之前是不能经过3的,一点要注意.其他的就比较简单了,就是一个双向BFS,先从2搜到4,再从3到搜到4, ...