文档章节

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

 易水寒521
发布于 2015/06/18 14:57
字数 946
阅读 53
收藏 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
博文 130
码字总数 120077
作品 0
虹口
私信 提问
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
11/04
0
0
程序猿必备的10款超炫酷HTML5 Canvas插件

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

爱前端
2017/12/04
0
0
9款风格华丽的jQuery/CSS3插件

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

yykj
2014/01/06
539
1
8 款个性化的 jQuery 和 CSS3 菜单

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

android哥哥
2012/08/22
2.7K
4
7个经典创意jQuery应用插件及源码

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

Lunaqi
2017/12/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

搬瓦工DC3机房和DC8机房哪个速度快,应该选哪个?

搬瓦工DC3机房和DC8机房都是搬瓦工CN2,那么这两个机房比较哪个机房速度快?搬瓦工DC3机房和DC8机房应该选择哪个机房?移动用户用DC8机房还是DC3机房?联通用DC3还是DC8快?电信应该选DC3还是...

Alanbrooke
30分钟前
1
0
探秘Runtime - Runtime介绍

该文章属于<简书 — 刘小壮>原创,转载请注明: <简书 — 刘小壮> https://www.jianshu.com/p/ce97c66027cd Runtime是iOS系统中重要的组成部分,面试也是必问的问题,所以Runtime是一个iOS工...

刘小壮
32分钟前
1
0
图形用户界面和交互输入方法---小结

中国龙-扬科
48分钟前
1
0
当程序员有了中年危机 你会发现你就是个屁

前言 程序员是一个怎样的存在?引用一句鸡汤的名言来说:你以为你用双手改变了世界,实际上是苍老了自己。为什么我今天会抛出这个话题,其实我也是一个懵懂的少年,我也曾经为了成为一名程序...

架构师springboot
58分钟前
13
0
大型网站B2C商城项目实战+MongoDB+Redis+zookeeper+MySQL

本文列出了当今计算机软件开发和应用领域最关键部分,如果你想保证你现在以及未来的几年不失业,那么你最好跟上这些技术的发展。虽然你不必对这十种技术样样精通,但至少应该对它们非常熟悉。...

java知识分子
58分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部