css3實現滑鼠懸浮出現一個說明層程式碼例項

admin發表於2017-02-22
CSSS3

本章節分享一段程式碼例項，它實現了滑鼠懸浮於元素之上，能夠以動畫方式出現一個提示標題層的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Microsoft YaHei" !important;
}
#box {
  background-color: #eee;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  position: relative;
}
.avatar {
  background-color: #4F94CD;
  width: 200px;
  height: 200px;
  position: absolute;
  margin: 100px 200px;
  border-radius: 50%;
  box-shadow: 3px 3px 4px;
  overflow: hidden;
}
.avatar a {
  text-decoration: none;
  display: block;
  padding-top: 150px;
}
.avatar a h1 {
  text-align: center;
  margin-top: -90px;
  color: #fff;
  font-size: 50px;
}
.avatar a span {
  display: block;
  margin-top: 74px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, .5);
  -webkit-transition: margin-top .3s ease-in-out;
  -moz-transition: margin-top .3s ease-in-out;
  -o-transition: margin-top .3s ease-in-out;
  transition: margin-top .3s ease-in-out; 
}
.avatar a:hover span {
  margin-top: 10px;
}
</style>
</head>
<body>
  <div id="box">
    <div class="avatar">
      <a href="#">
        <h1>螞蟻部落</h1>
        <span>softwhy.com</span>
      </a>
    </div>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
* {
  margin: 0;
  padding: 0;
}

簡單粗暴的程式碼重置，將所有元素的內邊距和外邊距設定為0。

當然還有更多更合理的樣式重置程式碼。

[CSS] 純文字檢視 複製程式碼
#box {
  background-color: #eee;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  position: relative;
}

上面的程式碼設定容器元素的尺寸。

並且水平居中和相對定位。

[CSS] 純文字檢視 複製程式碼
.avatar {
  background-color: #4F94CD;
  width: 200px;
  height: 200px;
  position: absolute;
  margin: 100px 200px;
  border-radius: 50%;
  box-shadow: 3px 3px 4px;
  overflow: hidden;
}

設定元素為圓形，採用了border-radius: 50%。

box-shadow: 3px 3px 4px設定陰影效果。

[CSS] 純文字檢視 複製程式碼
.avatar a span {
  display: block;
  margin-top: 74px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, .5);
  -webkit-transition: margin-top .3s ease-in-out;
  -moz-transition: margin-top .3s ease-in-out;
  -o-transition: margin-top .3s ease-in-out;
  transition: margin-top .3s ease-in-out; 
}
.avatar a:hover span {
  display: block;
  margin-top: 10px;
}

上面程式碼主要的作用是以動畫的方式設定元素的上外邊距。

二.相關閱讀:

（1）.border-radius可以參閱CSS3 border-radius一章節。

（2）.box-shadow可以參閱CSS3 box-shadow一章節。

（3）.rgba可以參閱CSS3 RGBA顏色一章節。

（4）.transition可以參閱CSS transition一章節。

相關文章