首页  »   HTML/CSS

CSS3 鼠标滑过按钮显示光影卡通片

网友分享于:2018-05-16  浏览:0次
CSS3 鼠标滑过按钮显示光影动画
CSS3实现鼠标滑过按钮显示光影的动画特效,这些光影效果是在鼠标悬停于按钮时才出现,有斜向的,有水平向两侧展开的,很好的与用户的操作交互,形成极强的响应式操作体验.按钮上的文字可自定义,同时按钮的边框样式和光影颜色在CSS3代码中也可重新定义.
  测试请注意,这些按钮动画特效需要HTML5的浏览器支持,请不要使用IE测试.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3鼠标滑过按钮显示光影的动画- www.codesc.net </title>
</head>
 <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 {width: 100%;}
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>
<body>
CSS3实现鼠标滑过按钮显示光影的动画特效,测试请注意,这些按钮动画光影特效需要HTML5的浏览器支持,请不要使用IE测试.
<div class="wrapper">
  <p class="holder">
    <a href="#" class="animBtn themeA">CSS3光影按钮</a>
    <a href="#" class="animBtn themeB">响应式鼠标动画</a>
    <a href="#" class="animBtn themeC">水平方向展开的光影</a>
    <a href="#" class="animBtn themeD">水平方向光影按钮</a>
  </p>
</div>
</body>
</html>


引用页:http://www.codesc.net/jscss/4093.shtml

相关解决方案

最新解决方案