2018-11-10 今天是我第一次寫博客，因為沒經驗嘛，我就隨便寫寫，我也希望自己以後能堅持寫下去，不為別的，就為了自己能夠更好地學習編程，能夠追隨行業大牛的腳步，從此贏取白富美，走上人生巔峰（額，理想遠大呵！） 好吧，步入正題，因為目前在學java,加了一些培訓機構的群，跟著做了一個小項目，就是 ...
2018-11-10
今天是我第一次寫博客，因為沒經驗嘛，我就隨便寫寫，我也希望自己以後能堅持寫下去，不為別的，就為了自己能夠更好地學習編程，能夠追隨行業大牛的腳步，從此贏取白富美，走上人生巔峰（額，理想遠大呵！）
好吧，步入正題，因為目前在學java,加了一些培訓機構的群，跟著做了一個小項目，就是做個頁面，當滑鼠懸浮於圖片之上的時候，圖片會實現一個放大旋轉的效果，經簡單的，具體演示看下圖：
我覺得這個項目的難點有兩點：
- 背景上疊加的六邊形
- 滑鼠放置圖片上，圖片顯示旋轉放大效果
一，首先講一下如何做背景六邊形
這個六邊形其實是在li標簽中，放置兩個div標簽，並且都是用rgba設置成黑色半透明，在正常情況下我們都知道，一個li標簽里放兩個與li標簽一樣大的div標簽，肯定會放不下，這樣，有一個div會被擠出去，如圖所示
為了把兩個div都放入li中，就需要讓另一個div飄起來，覆蓋在上面，這裡就需要介紹一下絕對位置 ，
position:absolute;
left: 0;
top: 0;
然後在div的父標簽li中調用相對位置，將飄在外邊的的div拉回去，
position:relative;
這樣，我們就可以使用css3的transform屬性來旋轉兩個div，這樣就可以得到一個六邊形
二，滑鼠放置圖片上，圖片顯示旋轉放大效果
要實現這個功能，要用到css中的hover選擇器，用法如下
選擇滑鼠指針浮動在其上的元素，並設置其樣式：
image:hover
{
transform：scale（1.4） rotate（360deg）;
}
當然了，如果僅僅這樣就結束了，你是看不出效果的，因為畫面切換太快了，所以再此要用到css3 過渡屬性transition，讓css效果轉換，持續1秒
transition-duration:1s
就這些吧，再附個源碼（有些改動）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多邊形旋轉放大</title> </head> <body> <div class="box"> <ul> <li><img src="images/1.png"></li> <li><img src="images/2.png"></li> <li><img src="images/3.png"></li> <li><img src="images/4.png"></li> <li><img src="images/5.png"></li> <li class="cols2"><img src="images/6.png"></li> <li><img src="images/7.png"></li> <li><img src="images/8.png"></li> <li><img src="images/9.png"></li> <li><img src="images/10.png"></li> <li><img src="images/11.png"></li> <li><img src="images/12.png"></li> <li><img src="images/13.png"></li> <li><img src="images/14.png"></li> </ul> </div> </body> <style type="text/css"> body{ margin: 0; background-image: url("images/bodyBg.jpg"); } .box{ background-color: #d09324; width:1000px; height: 550px; margin:100px auto; background-image: url("images/bodyBg.jpg"); } ul{ margin:0; padding:18px; list-style: none; } li{ position:relative; background-color:rgba(0,0,0,0.5); height: 105px; width: 180px; float: left; margin:30px 5px; } li:before, li:after{ content: ""; background-color:rgba(0,0,0,0.5); height: 100px; width: 180px; position:absolute; left: 0; top: 0; } li:before{ transform:rotate(60deg); } li:after{ transform:rotate(-60deg); } .cols2{ margin-left:100px; } img{ position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; z-index: 9; transition-duration:1s; } .box img:hover { transform:scale(1.4) rotate(360deg); } </style> </html>
