css3實現滑鼠懸浮圖示旋轉高亮效果程式碼例項

admin發表於2017-02-21
CSSS3
本章節分享一段程式碼例項，它實現了滑鼠懸浮於圖示之上，實現旋轉高亮效果。

裡面有一段很小的javascript程式碼，註冊滑鼠懸浮和滑鼠離開事件處理函式。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
#order_nav {
  position: relative;
  background: #fff;
  position: relative;
}
#order_nav .list {
  width: 936px;
  margin: 0 auto;
}
#order_nav .list li {
  width: 116px;
  height: 116px;
  float: left;
  border-radius: 50%;
  position: relative;
  margin: 0 20px 80px 20px;
  position: relative;
  cursor: pointer;
  -webkit-transition: .4s all;
  -moz-transition: .4s all;
  transition: .4s all;
}
#order_nav .list li a {
  display: block;
  width: 100%;
  height: 100%;
}
#order_nav .list li .cycle_mark {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
 
#order_nav .list li .ico {
  width: 102px;
  height: 102px;
  position: absolute;
  left: 7px;
  top: 7px;
  background: #424242 url(demo/CSS/img/rotate.png);
  border-radius: 50%;
  z-index: 1;
  -webkit-transition: .4s all;
  -moz-transition: .4s all;
  transition: .4s all;
}
#order_nav .list li ._1 {
  background-position: 0px 0px;
}
#order_nav .list li ._2 {
  background-position: -102px 0px;
}
#order_nav .list li ._3 {
  background-position: -204px 0px;
}
#order_nav .list li ._4 {
  background-position: -306px 0px;
}
#order_nav .list li ._5 {
  background-position: -408px 0px;
}
#order_nav .list li ._6 {
  background-position: -510px 0px;
}
#order_nav .list li p {
  width: 100%;
  position: absolute;
  left: 0;
  top: 126px;
  text-align: center;
}
#order_nav .list li p span {
  font-size: 16px;
  color: #414141;
  display: block;
  font-weight: bold;
}
#order_nav .list li p strong {
  font-size: 12px;
  color: #f00;
  display: block;
}
#order_nav .list li.on {
  background: rgba(0,0,0,.5);
}
#order_nav .list li.on .ico {
  background-color: #0ff;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
</style>
<script>
window.onload=function(){
  var orderNav = document.getElementById("order_nav");
  var lis = orderNav.getElementsByTagName("li");
  for (var i = 0; i < lis.length; i++) {
    lis[i].onmouseover = function () {
      this.className = "on";
    };
    lis[i].onmouseout = function () {
      this.className = "";
    }
  }
}
</script>
</head>
<body>
<div id="order_nav">
  <ul class="list not_ie">
    <li>
      <div class="ico _1"><a href="#"></a></div>
      <p><span>網站建設</span></p>
    </li>
    <li>
      <div class="ico _2"><a href="#"></a></div>
      <p><span>網站設計</span></p>
    </li>
    <li>
      <div class="ico _3"><a href="#"></a></div>
      <p><span>網站策劃</span></p>
    </li>
    <li>
      <div class="ico _4"><a href="#"></a></div>
      <p><span>SEO優化</span></p>
    </li>
    <li>
      <div class="ico _5"><a href="#"></a></div>
      <p><span>WAP/APP</span></p>
    </li>
    <li>
      <div class="ico _6"><a href="#"></a></div>
      <p><span>網站營銷</span></p>
    </li>
  </ul>
</div>
</body>
</html>

相關文章