四种鼠标滑过标签过滤颜色

原创 2016年08月30日 16:17:57

 四种鼠标滑过标签过滤颜色



 <style type="text/css">

    html,body,.wrapper{
height:100%;}

body{
background:#28B2CB;
background-size:cover;
font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
    .wrapper{
/*background-color:white;*/
width:100%;
/*opacity:0.5;*/
}
.holder {
  position: absolute;
  top: 50%;
  height: 300px;
  width: 100%;
  margin-top: -170px;
}


a.animBtn:link, a.animBtn:visited {
  position: relative;
  display: block;
  width: 180px;
  margin: 30px auto 0;
  padding: 14px 15px;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  letter-spacing: .08em;
  /*text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);*/
  text-shadow:0 1px 1px rgba(0,0,0,0.2);
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
a.animBtn:link:after, a.animBtn:visited:after {
  content: "";
  position: absolute;
  background: none repeat scroll 0 0 #fff;
  height: 0%;
  left: 50%;
  top: 50%;
  width: 100%;
  z-index: -1;
  -webkit-transition: all .3s ease 0s;
  -moz-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}
a.animBtn:link:hover, a.animBtn:visited:hover {
  color: #333;
  text-shadow: none;
}
a.animBtn:link:hover:after, a.animBtn:visited:hover:after {
  height: 420%;
}


a.animBtn.themeA:after {
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
a.animBtn.themeB:after {
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
a.animBtn.themeC:after {
  opacity: .5;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
a.animBtn.themeC:hover:after {
  height: 140%;
  opacity: 1;
}
a.animBtn.themeD:after {
  width: 0%;
  border-radius: 50%;
  opacity: .5;
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
a.animBtn.themeD:hover:after {
  height: 450%;
  width: 110%;
  opacity: 1;
}

  </style>


<div class="wrapper">
  <p class="holder">
    <a href="#" class="animBtn themeA">Discover More A</a>
    <a href="#" class="animBtn themeB">Discover More B</a>
    <a href="#" class="animBtn themeC">Discover More C</a>
    <a href="#" class="animBtn themeD">Discover More D</a>
  </p>
</div>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

CSS3鼠标滑过渐变颜色旋转图标特效

CSS3鼠标滑过渐变颜色旋转图标特效 *{margin: 0;padding: 0;list-style: none;} #order_nav {  position: relative; back...

动态事创建的a标签上利用jq滑过元素执行事件通过ajax获取后台数据根据鼠标位置展示数据内容,鼠标离开消失

动态事创建的a标签上利用jq滑过元素执行事件通过ajax获取后台数据根据鼠标位置展示数据内容,鼠标离开消失

js Table鼠标滑过变色,单击变色,隐藏某列的方法

/**         *table变色方法          *         *@param tableId 需要设置变色的table的ID   ...

鼠标滑过列表文字显示图片及详细信息信息信息 visual studio 08

12007-2-10鼠标滑过列表文字显鼠标滑过列表文字显示图片及详细信息信息信息日增:55522008-2-10鼠标滑过列表文字显鼠标滑过列表文字显示图片及详细信息信息信息日增:66632009-2-...

css3+html+Jquery实现鼠标滑过图片切换效果

css3+html+Jquery实现鼠标滑过图片切换效果 position:relative;/*相对定位:参考物*/ overflow:hidden;/*超出隐藏*/

使用jQuery实现鼠标滑过图片移动特效

在网页应用中,鼠标操作是最为常见和频繁的操作,在用户移动鼠标浏览页面的时候,一些交互特效的提醒会增强用户体验度,也可让用户感觉页面在和他“交流”,从而增加用户在页面的逗留时间,以及增加深层次访问的可能...

Qt-QML-Button-ButtonStyle-实现鼠标滑过点击效果

上次实现的自定义的Button功能是用的自定义的Rectangle来实现的,在慢慢的接触了QML之后,发现QML有自己定义的Button 这里盗版贴上Qt帮助文档中的部分关于Button的属性内容 ...

jquery 的实现鼠标滑过显示大图

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 图片提示 ...

自定义弹出框 鼠标滑过按钮有特效

package game.view.component.alert { import com.greensock.TweenLite; import flash.display.Dis...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)