文档章节

基于css3的鼠标滑动按钮动画

 易水寒521
发布于 2015/06/18 14:57
字数 946
阅读 48
收藏 0
点赞 0
评论 0

html

 <!doctype html>     
<html lang="en">     
<head>     
<meta charset="UTF-8">     
<title>基于css3的鼠标滑动按钮动画</title>     
</head>     
<body>     
<link rel="stylesheet" type="text/css" href="css/btn1.css">     
<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>     
<script src="/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>     
</body>     
</html>

btn1

 #wrap {
    margin: 20px auto;
    text-align: center;
}
#wrap br {
    display: none;
}
.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}
.btn-slide2 {
    border: 2px solid #efa666;
}
.btn-slide:hover {
    background-color: #0099cc;
}
.btn-slide2:hover {
    background-color: #efa666;
}
.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    right: 100%;
    margin-right: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}
.btn-slide2:hover span.circle2 {
    color: #efa666;
}
.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    right: 40px;
    opacity: 0;
}
.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    right: 40px;
}
.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: right;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    right: 0;
    transition: .5s;
    border-radius: 50%;
}
.btn-slide2 span.circle2 {
    background-color: #efa666;
}
.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    right: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}
.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    right: 80px;
  }
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    right: 80px;
    opacity: 0;
}
.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

btn2

/*--按钮1--*/
.container1 {
  width:200px;
  display:block;
  margin:20px auto;
  position:relative;
  font-family:droid arabic kufi;
}
.con_down1 {
  display:block;
  cursor:pointer;
  background-color:#F6EB96;
  width:190px;
  height:50px;
  padding-left:10px;
  padding-top:5px;
  text-align:left;
  border-bottom:4px solid #D8B83C;
  border-radius:5px;
  position:relative;
  line-height:50px;
}
.con_down1 .fa-download{
  position:absolute;
  right:10px;
  top:15px;color:#895D0A;
}
.con_down1 h4 {
  color:#895D0A;
  text-transform:uppercase;
  margin:0;
}
.sizes1 h5 {
    margin:0;
}
.sizes1 {
  background-color:#E3E3E3;
  width:100px;
  height:30px;
  z-index:-9;
  padding-top:2px;
  border-bottom:4px solid #AAA9A9;
  position:absolute;
  top:13px;
  left:20px;
  transition:.5s all ease-in-out;
}
.size {
  line-height:30px;
  text-align:center;
  color:#4B4B4B;
}
.sizes_abs1 {
  background-color:#F6EB96;
  cursor:pointer;
  width:20px;
  border-bottom:4px solid #D8B83C;
  border-bottom-left-radius:5px;
  border-top-left-radius:5px;
  height:55px;
  position:absolute;
  top:-13px;
  left:-20px;
  z-index:2;
}
.container1:hover .sizes1 {
  left:-100px;
}
.container1:hover .con_down1 {
  background-color:#F1DD5E;
     border-bottom-left-radius:0;
  border-top-left-radius:0;
}
.container1:hover .sizes_abs1 {
  background-color:#F1DD5E;
}
/*--按钮2--*/
.container2 {
    width:200px;
    display:block;
    margin:20px auto;
    position:relative;
    font-family:droid arabic kufi;
}
.con_down2 {
    display:block;
    cursor:pointer;
    background-color:#F6EB96;
    width:190px;
    height:50px;
    padding-left:10px;
    padding-top:5px;
    text-align:left;
    border-bottom:4px solid #D8B83C;
    border-radius:5px;
    position:relative;
    line-height:50px;
    transition:.5s all ease-in-out;
}
.con_down2 .fa-download {
    position:absolute;
    right:10px;
    top:15px;
    color:#895D0A;
}
.con_down2 h4 {
    color:#895D0A;
    text-transform:uppercase;
    margin:0;
}
.sizes2 h5 {
    margin:0;
}
.sizes2 {
    background-color:#E3E3E3;
    width:100px;
    height:30px;
    z-index:-9;
    position:absolute;
    bottom:22px;
    right:50%;
    margin-right:-50px;
    transition:.5s all ease-in-out;
}
.size {
    line-height:30px;
    text-align:center;
    color:#4B4B4B;
}
.sizes_abs2 {
    background-color:#F6EB96;
    cursor:pointer;
    width:200px;
    border-bottom:4px solid #D8B83C;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    height:20px;
    position:absolute;
    left:-50px;
    bottom:-22px;
    z-index:2;
}
.container2:hover .sizes2 {
    bottom:-30px;
}
.container2:hover .con_down2 {
    background-color:#F1DD5E;
    border-bottom:0;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
}
.container2:hover .sizes_abs2 {
    background-color:#F1DD5E;
}

 btn3

.spinningeffect img {
/* Spinning Social Icons Widget By www.mudwnp.blogspot.com */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.spinningeffect img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.center {
    text-align: center;
}

btn4

.mudwnpbutton {
   color: #222;
   background: #9dea4f;
   padding: 20px 30px;
   -webkit-transition:-webkit-box-shadow .5s ease;
   -moz-transition:-webkit-box-shadow .5s ease;
   -ms-transition:-webkit-box-shadow .5s ease;
   -o-transition:-webkit-box-shadow .5s ease;
   transition:-webkit-box-shadow .5s ease;
   margin:0 auto;
   font: normal 16px Arial, Verdana;
   width: 100px;
}
.mudwnpbutton:hover {
   color: #222;
   background: #BBFD12;
   -webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
   -moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
   -ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
   -o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
   box-shadow:0 0 0 9999px rgba(0,0,0,.4);
   position:relative;
   z-index:99999;
}
.mudwnpbutton a {
   color: #222;
   text-decoration: none;
   font: normal 16px Arial, Verdana;
}

 

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 129
码字总数 120077
作品 0
虹口
程序猿必备的10款超炫酷HTML5 Canvas插件

  1.超炫酷HTML5 Canvas 3D旋转地球动画   这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们...

爱前端 ⋅ 2017/12/04 ⋅ 0

9款风格华丽的jQuery/CSS3插件

今天向大家分享9款效果相当不错的jQuery/CSS3插件,不多说,直接来看看这些插件吧。 1、jQuery动画下拉菜单Smart Menu 这是一款基于jQuery的动画下拉菜单,子菜单外观比较时尚,鼠标移到菜单...

yykj ⋅ 2014/01/06 ⋅ 1

8 款个性化的 jQuery 和 CSS3 菜单

下面要给大家分享8款非常个性化的jQuery和CSS3菜单,这些菜单由于外观比较独特,所以也许不是非常通用,但是我们可以认可的是这些菜单的设计思路非常棒,值得借鉴。下面一起来看看这些菜单吧...

android哥哥 ⋅ 2012/08/22 ⋅ 4

7个经典创意jQuery应用插件及源码

本文主要分享一些非常具有创意的jQuery应用插件,它们不仅在外观上别具一格,而且功能上也是那么富有新意,尤其是第一个jQuery平面时钟,其设计思路让人叹为观止。还是来看看以下这些jQuery插...

Lunaqi ⋅ 2017/12/12 ⋅ 0

程序猿必备的15款web前端动画插件七

  1.超简易的SVG/CSS3 Loading加载动画图标   今天我们要为大家分享一组非常简易的SVG/CSS3 Loading加载动画图标,和之前分享的SVG实现的一组超华丽Loading加载动画相比,这组Loading动画...

爱码农 ⋅ 01/08 ⋅ 0

12款超强CSS3应用集锦下载

CSS3非常强大,它可以渲染很多你意想不到的特效,而且目前浏览器对CSS3的支持也逐渐放开了,所以利用CSS3可以制作一些即美观又实用的网页应用,下面12款CSS3应用集锦分享给大家,有源代码下载...

Lunaqi ⋅ 2017/11/20 ⋅ 0

程序猿必备的8款web前端SVG动画特效

  1、SVG图片波浪效果渲染动画   今天我们要为大家分享一款很酷的SVG图片动画,主要是图片上会出现波浪的渲染动画。实现原理是在图片上方利用SVG路径绘制了一层蒙板,然后蒙版进行一定的...

爱前端 ⋅ 2017/12/06 ⋅ 0

8个超炫酷仿苹果应用的HTML5动画

苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备。本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图、钟表、菜单等HTML5应用和jQuery插件,...

9秒学院 ⋅ 2016/01/06 ⋅ 0

7 个效果震憾的 HTML5 应用组件

在HTML5的世界里,任何文本、图像都可以变得令人难以想象,很多HTML5应用也都已经随着浏览器的升级而变得运行飞速,而且兼容性也越来越好。下面为大家介绍7款效果震憾的HTML5应用组件,HTML5...

yykj ⋅ 2013/07/02 ⋅ 19

炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间 ⋅ 2014/07/05 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

RabbitMQ学习以及与Spring的集成(三)

本文介绍RabbitMQ与Spring的简单集成以及消息的发送和接收。 在RabbitMQ的Spring配置文件中,首先需要增加命名空间。 xmlns:rabbit="http://www.springframework.org/schema/rabbit" 其次是模...

onedotdot ⋅ 15分钟前 ⋅ 0

JAVA实现仿微信红包分配规则

最近过年发红包拜年成为一种新的潮流,作为程序猿对算法的好奇远远要大于对红包的好奇,这里介绍一种自己想到的一种随机红包分配策略,还请大家多多指教。 算法介绍 一、红包金额限制 对于微...

楠木楠 ⋅ 27分钟前 ⋅ 0

Python 数电表格格式化 xlutils xlwt xlrd的使用

需要安装 xlutils xlwt xlrd 格式化前 格式化后 代码 先copy读取的表格,然后按照一定的规则修改,将昵称中的学号提取出来替换昵称即可 from xlrd import open_workbookfrom xlutils.copy ...

阿豪boy ⋅ 56分钟前 ⋅ 0

面试题:使用rand5()生成rand7()

前言 读研究生这3 年,思维与本科相比变化挺大的,这几年除了看论文、设计方案,更重要的是学会注重先思考、再实现,感觉更加成熟吧,不再像个小P孩,人年轻时总会心高气傲。有1 道面试题:给...

初雪之音 ⋅ 56分钟前 ⋅ 0

Docker Toolbox Looks like something went wrong

Docker Toolbox 重新安装后提示错误:Looks like something went wrong in step ´Checking if machine default exists´ 控制面板-->程序与应用-->启用或关闭windows功能:找到Hyper-V,如果处......

随你疯 ⋅ 今天 ⋅ 0

Guacamole 远程桌面

本文将Apache的guacamole服务的部署和应用,http://guacamole.apache.org/doc/gug/ 该链接下有全部相关知识的英文文档,如果水平ok,可以去这里仔细查看。 一、简介 Apache Guacamole 是无客...

千里明月 ⋅ 今天 ⋅ 0

nagios 安装

Nagios简介:监控网络并排除网络故障的工具:nagios,Ntop,OpenVAS,OCS,OSSIM等开源监控工具。 可以实现对网络上的服务器进行全面的监控,包括服务(apache、mysql、ntp、ftp、disk、qmail和h...

寰宇01 ⋅ 今天 ⋅ 0

AngularDart注意事项

默认情况下创建Dart项目应出现以下列表: 有时会因为不知明的原因导致列表项缺失: 此时可以通过以下步骤解决: 1.创建项目涉及到的包:stagehand 2.执行pub global activate stagehand或pub...

scooplol ⋅ 今天 ⋅ 0

Java Web如何操作Cookie的添加修改和删除

创建Cookie对象 Cookie cookie = new Cookie("id", "1"); 修改Cookie值 cookie.setValue("2"); 设置Cookie有效期和删除Cookie cookie.setMaxAge(24*60*60); // Cookie有效时间 co......

二营长意大利炮 ⋅ 今天 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部