成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

一個簡單的動態(tài)頁面（我的第一個博客）

番茄西紅柿 / 1349人閱讀

摘要：今天是我第一次寫博客，因為沒經(jīng)驗嘛，我就隨便寫寫，我也希望自己以后能堅持寫下去，不為別的，就為了自己能夠更好地學(xué)習(xí)編程，能夠追隨行業(yè)大牛的腳步，從此贏取白富美，走上人生巔峰額，理想遠大呵好吧，步入正題，因為目前在學(xué)加了一些

2018-11-10

今天是我第一次寫博客，因為沒經(jīng)驗嘛，我就隨便寫寫，我也希望自己以后能堅持寫下去，不為別的，就為了自己能夠更好地學(xué)習(xí)編程，能夠追隨行業(yè)大牛的腳步，從此贏取白富美，走上人生巔峰（額，理想遠大呵?。?/span>

 

好吧，步入正題，因為目前在學(xué)java,加了一些培訓(xùn)機構(gòu)的群，跟著做了一個小項目，就是做個頁面，當鼠標懸浮于圖片之上的時候，圖片會實現(xiàn)一個放大旋轉(zhuǎn)的效果，經(jīng)簡單的，具體演示看下圖：

 

 

我覺得這個項目的難點有兩點：

  1. 背景上疊加的六邊形
  2. 鼠標放置圖片上，圖片顯示旋轉(zhuǎn)放大效果

一，首先講一下如何做背景六邊形

　　這個六邊形其實是在li標簽中，放置兩個div標簽，并且都是用rgba設(shè)置成黑色半透明，在正常情況下我們都知道，一個li標簽里放兩個與li標簽一樣大的div標簽，肯定會放不下，這樣，有一個div會被擠出去，如圖所示

為了把兩個div都放入li中，就需要讓另一個div飄起來，覆蓋在上面，這里就需要介紹一下絕對位置 ，

 

 

position:absolute;
left: 0;
top: 0;

然后在div的父標簽li中調(diào)用相對位置，將飄在外邊的的div拉回去，

position:relative;

這樣，我們就可以使用css3的transform屬性來旋轉(zhuǎn)兩個div，這樣就可以得到一個六邊形

 

二，鼠標放置圖片上，圖片顯示旋轉(zhuǎn)放大效果

要實現(xiàn)這個功能，要用到css中的hover選擇器，用法如下

選擇鼠標指針浮動在其上的元素，并設(shè)置其樣式：

image:hover
{ 
transform：scale（1.4） rotate（360deg）;
}

當然了，如果僅僅這樣就結(jié)束了，你是看不出效果的，因為畫面切換太快了，所以再此要用到css3 過渡屬性transition，讓css效果轉(zhuǎn)換，持續(xù)1秒

transition-duration:1s

就這些吧，再附個源碼（有些改動）

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多邊形旋轉(zhuǎn)放大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>

 

 



 


 
           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1566.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    一起來學(xué)SpringBoot | 第四篇：整合Thymeleaf模板
    
                                                     
    摘要：在使用上述模板，默認從下加載。介紹是現(xiàn)代化服務(wù)器端的模板引擎，不同與其它幾種模板的是的語法更加接近，并且具有很高的擴展性。特點支持無網(wǎng)絡(luò)環(huán)境下運行，由于它支持原型，然后在標簽里增加額外的屬性來達到模板數(shù)據(jù)的展示方式。


SpringBoot 是為了簡化 Spring 應(yīng)用的創(chuàng)建、運行、調(diào)試、部署等一系列問題而誕生的產(chǎn)物，自動裝配的特性讓我們可以更好的關(guān)注業(yè)務(wù)本身而不是外部的XML配置，...
    
                                                   
                          
    
                                
    
                                    TZLLOG
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    解決 Github Pages 禁止百度爬蟲的方法與可行性分析
    
                                                     
    摘要：可行性分析是通過來判定百度爬蟲并返回的。然而并沒有卵用參考資料如何解決百度爬蟲無法爬取搭建在上的個人博客的問題


  本文最初發(fā)布于我的個人博客：咀嚼之味


我寫技術(shù)博客有兩個原因：一是總結(jié)自己近日的研究成果，二是將這些成果分享給大家。所以就我個人來說，還是比較希望寫出來的文章有更多的人能夠看到的。我最近注意到我的博客的流量大多來自于谷歌，而幾乎沒有來源于百度的。而本文就旨在提出這個...
    
                                                   
                          
    
                                
    
                                    Yuanf
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    [譯] 如何恰當?shù)貙W(xué)習(xí) JavaScript
    
                                                     
    摘要：原文鏈接恰當?shù)貙W(xué)習(xí)適合第一次編程和非的程序員持續(xù)時間到周前提無需編程經(jīng)驗繼續(xù)下面的課程。如果你沒有足夠的時間在周內(nèi)完成全部的章節(jié)，學(xué)習(xí)時間盡力不要超過周。你還不是一個絕地武士，必須持續(xù)使用你最新學(xué)到的知識和技能，盡可能地經(jīng)常持續(xù)學(xué)習(xí)和提高。

原文鏈接：How to Learn JavaScript Properly

恰當?shù)貙W(xué)習(xí) JavaScript （適合第一次編程和非 JavaSc...
    
                                                   
                          
    
                                
    
                                    Jason
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           

              
 
                

                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    














<