【第22期】观点:IT 行业加班,到底有没有价值?

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

原创 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>


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

相关文章推荐

自做jQuery插件----表格(奇偶行不同色,鼠标滑过颜色效果,单击高亮)

这个表格不是table的表格,而且使用div的ul和li组成的表格形式。HTML页面效果如下: HTML页面代码如下: &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt; &lt;html&gt

BIRT报表技术

Birt 开发文档 目录 一.前言................................................................................

欢迎关注CSDN程序人生公众号

关注程序员生活,汇聚开发轶事。

鼠标滑过tr变颜色【原创】

&lt;tr style = "background:#FFFAF0;" height="20px" onMouseOver="this.style.background = '#99CCFF';" onMouseOut="this.style.background ='#FFFAF0' ";"&gt; 这样就可以了。  
  • ml365
  • ml365
  • 2010-12-11 22:41
  • 408

CSS鼠标滑过改变样式颜色

宇视面试题(前段开发)

当鼠标滑过表格时,表格的行会高亮显示,鼠标离开颜色复原,如果鼠标点击,点击行会保存为红色不变

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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