css3實現的滑鼠懸浮按鈕動畫效果

antzone發表於2017-03-22
CSSS3動畫

分享一段程式碼例項，它實現了滑鼠懸浮按鈕動畫效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.content {
  padding: 2em 1em 5em;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
}
.content p {
  margin: 1em 0;
  padding: 0 0 2em;
  font-size: 0.85em;
}
.box {
  padding: 4.5em 0;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
}
.bg-3 {
  background-color: #ccc;
  color: #fff;
}
.button {
  float: left;
  min-width: 150px;
  max-width: 250px;
  display: block;
  margin: 3em;
  padding: 1em 3em;
  border: 2px solid #ccc;
  background: #000;
  color: inherit;
  vertical-align: middle;
  position: relative;
  z-index: 1;
  -webkit-backface-visibility: hidden;
}
.button:focus {
  outline: none;
}
.button > span {
  vertical-align: middle;
}
.bg-3 .button {
  color: #fff;
  border-color: #fff;
  border-radius: 20px;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.button--tamaya {
  overflow: hidden;
  color: #7986cb;
  min-width: 180px;
}
.button--tamaya.button--inverted {
  color: #37474f;
  border-color: #37474f;
}
.button--tamaya::before,
.button--tamaya::after {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  height: 52%;
  left: 0;
  background: #f66705;
  color: #fff;
  overflow: hidden;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.bttwo::before,
.bttwo::after {
  background: #1a72d1;
}
.btthree::before,
.btthree::after {
  background: #349e00;
}
.btfour::before,
.btfour::after {
  background: #db1205;
}
.button--tamaya.button--inverted::before,
.button--tamaya.button--inverted::after {
  background: #fff;
  color: #37474f;
}
.button--tamaya::before {
  top: 0;
  padding-top: 1em;
}
.button--tamaya::after {
  bottom: 0;
  line-height: 0;
}
.button--tamaya > span {
  display: block;
  -webkit-transform: scale3d(0.2, 0.2, 1);
  transform: scale3d(0.2, 0.2, 1);
  opacity: 0;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
.button--tamaya:hover::before {
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}
.button--tamaya:hover::after {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
.button--tamaya:hover > span {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}
</style>
</head>
<body>
<section class="content">
  <div class="box bg-3">
    <button class="button button--tamaya" data-text="螞蟻部落一"><span>螞蟻部落一</span></button>
    <button class="button button--tamaya bttwo" data-text="螞蟻部落二"><span>螞蟻部落二</span></button>
    <button class="button button--tamaya btthree" data-text="螞蟻部落三"><span>螞蟻部落三</span></button>
    <button class="button button--tamaya btfour" data-text="螞蟻部落四"><span>螞蟻部落四</span></button>
  </div>
</section>
</body>
</html>

相關文章