css3氣泡動態上升效果

admin發表於2018-09-12
CSSS3

分享一段程式碼例項，它實現了氣泡上升效果。

雖然上升的東西不像是氣泡，但是動作已經非常相像了，只要稍微修改一下即可。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.nav li {
  width: 130px;
  height: 150px;
  list-style:none;
  position: relative;
}
.nav li a {
  height: 150px;
  display: block;
}
li a i {
  position: absolute;
  bottom: 26px;
  left: 20px;
  width: 5px;
  height: 5px;
  opacity: 0;
  background: #000;
  border-radius: 2px;
  box-shadow: 0 0 2px #ff6a82;
  display: block;
}
.nav li a.hover .i-1 {
  animation: lightAni1 3s linear infinite;
}
.nav li a.hover .i-2 {
  animation: lightAni2 3s 1s linear infinite;
}
.nav li a.hover .i-3 {
  animation: lightAni1 3s 2s linear infinite;
}
.nav li a.hover .i-4 {
  animation: lightAni1 3s 2.2s linear infinite;
}
.nav li a.hover .i-5 {
  animation: lightAni3 3s 1.5s linear infinite;
}
.nav li a.hover .i-6 {
  animation: lightAni2 3s .5s linear infinite;
}
.nav li a.hover .i-7 {
  animation: lightAni1 3s .8s linear infinite;
}
@keyframes lightAni1 {
  0% {
    opacity: 0.5;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-50px);
  }
  100% {
    opacity: 0;
    transform: translateY(-100px);
  }
}
@keyframes lightAni2 {
  0% {
    opacity: 0.5;
    transform: translate(0,0);
  }
  50% {
    opacity: 1;
    transform: translate(-10px,-50px);
  }
  100% {
    opacity: 0;
    transform: translate(-20px,-100px);
  }
}
@keyframes lightAni3 {
  0% {
    opacity: 0.5;
    transform: translate(0,0);
  }
  50% {
    opacity: 1;
    transform: translate(10px,-50px);
  }
  100% {
    opacity: 0;
    transform: translate(20px,-100px);
  }
}
</style>
</head>
<body>
  <ul class="nav">
    <li class="nav-2">
      <a href="#" class="hover">
        <i class="i-1"></i>
        <i class="i-2"></i>
        <i class="i-3"></i>
        <i class="i-4"></i>
        <i class="i-5"></i>
        <i class="i-6"></i>
        <i class="i-7"></i>
      </a>
    </li>
  </ul>
</body>
</html>

程式碼基本實現了預期效果，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
.nav li {
  width: 130px;
  height: 150px;
  list-style:none;
  position: relative;
}

設定li元素的寬度為130px，高度為150px。

list-style:none去掉li元素列表前面預設的樣式圖示，比如黑點。

最後將其設定為相對定位，作用會在後面介紹。

[CSS] 純文字檢視 複製程式碼
.nav li a {
  height: 150px;
  display: block;
}

設定連結a元素的高度為150px，由於a被轉換為塊級元素，所以它的寬度能夠填滿父元素150px。

[CSS] 純文字檢視 複製程式碼
li a i {
  position: absolute;
  bottom: 26px;
  left: 20px;
  width: 5px;
  height: 5px;
  opacity: 0;
  background: #000;
  border-radius: 2px;
  box-shadow: 0 0 2px #ff6a82;
  display: block;
}

這就是我們所看到的上浮的元素。

採用絕對定位，它的定位參考物件是li元素（定位方式為相對定位）。

利用border-radius將其設定為圓角，然後利用box-shadow設定陰影模糊效果。

[CSS] 純文字檢視 複製程式碼
.nav li a.hover .i-1 {
  animation: lightAni1 3s linear infinite;
}

為第一個i元素設定動畫效果，其他i元素也是同樣的道理。

二.相關閱讀:

（1）.相對定位參閱CSS position:relative 相對定位一章節。

（2）.絕對定位參閱CSS position:absolute 絕對定位一章節。

（3）.border-radius參閱CSS3 border-radius一章節。

（4）.box-shadow參閱CSS3 box-shadow一章節。

（5）.animation參閱CSS3 animation一章節。

（6）.@keyframes參閱CSS3 @keyframes一章節。

（7）.transform參閱CSS3 transform一章節。

相關文章