一個簡單的動態頁面（個人第一個博客）

時間 2019-11-18

標籤一個簡單動態頁面個人第一個博客简体版

原文原文鏈接

2018-11-10
css

今天是我第一次寫博客，由於沒經驗嘛，我就隨便寫寫，我也但願本身之後能堅持寫下去，不爲別的，就爲了本身可以更好地學習編程，可以追隨行業大牛的腳步，今後贏取白富美，走上人生巔峯（額，理想遠大呵！）html

好吧，步入正題，由於目前在學java,加了一些培訓機構的羣，跟着作了一個小項目，就是作個頁面，當鼠標懸浮於圖片之上的時候，圖片會實現一個放大旋轉的效果，經簡單的，具體演示看下圖：java

我以爲這個項目的難點有兩點：css3

背景上疊加的六邊形
鼠標放置圖片上，圖片顯示旋轉放大效果

一，首先講一下如何作背景六邊形編程

　　這個六邊形實際上是在li標籤中，放置兩個div標籤，而且都是用rgba設置成黑色半透明，在正常狀況下咱們都知道，一個li標籤裏放兩個與li標籤同樣大的div標籤，確定會放不下，這樣，有一個div會被擠出去，如圖所示學習

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

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

而後在div的父標籤li中調用相對位置，將飄在外邊的的div拉回去，spa

position:relative;

這樣，咱們就可使用css3的transform屬性來旋轉兩個div，這樣就能夠獲得一個六邊形3d

二，鼠標放置圖片上，圖片顯示旋轉放大效果指針

要實現這個功能，要用到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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。