CSS3幽靈

時間 2019-12-14

標籤 css3 css 幽靈欄目 CSS 简体版

原文原文鏈接

先來看看靜態效果圖：css

要作的效果是鼠標移到圖片上時，圖片旋轉360度並放大1.2倍html

鼠標移動到下方框時，四周有四條線分別沿着四條框進入，同時箭頭向左移動動畫

主要使用的CSS3屬性是transition，transformurl

transition用於定義過渡動畫，好比：transition:all 1s; transition:width 1s;意思是全部css屬性改變的過渡時間爲1s。這個屬性定義在須要進行動畫發生的那個元素的選擇器上面spa

transform用於變換，包括縮放scale(倍數，好比1.0、1.2)，平移translate(x座標，y座標),旋轉rotate(XXdeg)，語法：transform:ratate() translate() scale();code

參考代碼以下：orm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>幽靈按鈕</title>
        <style type="text/css">
            /*清除默認邊距和內填充*/
            *{
                margin:0;
                padding:0;
            }
            body{
                background: black;
            }
            #wrap{
                width: 900px;
                height: 300px;
                margin: 100px auto;/*元素居中*/
            }
            .box{
                height: 300px;
                width: 30%;
                float: left;
            }
            .box span{
                display: block;
                width: 100%;
                height: 200px;
                text-align: center;/*圖片元素會被視爲文本內容，水平居中能夠使用text-align，可是畢竟不是文本，因此垂直不能夠使用line-height*/
                padding-top: 50px;
                transition: all 1s; 
            }
            .box span:hover{
                transform: rotate(360deg) scale(1.2);/*不能夠在第二行另寫transform：scale(1.2)這樣只會覆蓋上一句，因此兩個效果必須一塊兒寫，用空格隔開*/
            }
            .box a{
                border-radius: 5px;
                margin: auto;
                width: 80%;
                height: 50px;
                line-height: 55px;/*這裏須要算上border的寬度*/
                padding: 5px;
                position: relative;/*用於四條動畫邊的定位*/
                color: white;
                text-decoration: none;
                display: block;
                border: 2px green solid;
                background: url(img/allow.png) no-repeat 90%;
                transition: all 0.5s;
            }
            
            p{
                background: green;
                position: absolute;
                transition: all 0.5s;
            }
            .top{
                width: 0%;
                height: 2px;
                top: -2px;
                left: -50%;
            }
            .right{
                width: 2px;
                height: 0%;
                top: -100%;
                right: -2px;
            }
            .bottom{
                width: 0%;
                height: 2px;
                top: calc(100%+2px);
                left: 150%;
            }
            .left{
                width: 2px;
                height: 0%;
                top: 200%;
                left: -2px;
            }
            
            .box a:hover{
                background: url(img/allow.png) no-repeat 95%;
            }
            .box a:hover .top{
                width: 100%;
                left: -2px;
            }
            .box a:hover .right{
                height: 100%;
                top: -2px;
            }
            .box a:hover .bottom{
                width: 100%;
                left:-2px;    
            }
            .box a:hover .left{
                height: 100%;
                top: -2px;
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div class="box">
                <span>
                    <img src="img/mission.png" alt="mission" />
                </span>
                <a href="#">
                    mission
                    <p class="top"></p>
                    <p class="right"></p>
                    <p class="bottom"></p>
                    <p class="left"></p>
                </a>
            </div>
            <div class="box">
                <span>
                    <img src="img/mission.png" alt="mission" />
                </span>
                <a href="#">
                    mission
                    <p class="top"></p>
                    <p class="right"></p>
                    <p class="bottom"></p>
                    <p class="left"></p>
                </a>
            </div>
            <div class="box">
                <span>
                    <img src="img/mission.png" alt="mission" />
                </span>
                <a href="#">
                    mission
                    <p class="top"></p>
                    <p class="right"></p>
                    <p class="bottom"></p>
                    <p class="left"></p>
                </a>
            </div>
        </div>
    </body>
</html>

這裏說一下四條邊製做的思路，拿左邊第一條爲例。父元素設置爲relative，所以，子元素會相對於父元素定位，假如第一條邊爲top：0，left：0.則只會在父元素的邊框下面，而不會與邊框重疊，所以top須要設置爲負的父元素的邊框長度，這樣就會使得兩邊重合。而後經過定義left：-100%，將邊設置到左邊寬度爲父元素寬度的地方，而後把width設置會0%，height爲邊框高度，而後設置僞類選擇器，當鼠標移動到邊框範圍，就觸發動畫，在0.5s內將邊的width變爲100%，而且改變left爲：-2px；就能夠作到同時邊大小改變且向父元素邊框靠近重合的效果htm

素材以下：blog

箭頭：圖片

三張圖片（由於白色因此看不見）：、、

1. jboss幽靈報錯
2. 聊聊幽靈Class
3. html5: 幽靈按鈕
4. 關於IE6幽靈字體
5. 幽靈按鈕的實現
6. 幽靈交易者策略
7. 安裝幽靈瀏覽器
8. 《幽靈公主》後感
9. 幽靈菜單介紹；
10. GhostNet 幽靈網絡結構。
更多相關文章...
• jQuery Mobile 簡介 - jQuery Mobile 教程
• W3C CSS 活動 - W3C 教程
• 委託模式
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

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