前端實戰(1)-動畫Banner設計

weixin_34007291發表於2016-07-19
前端動畫

title: 前端實戰(1)-動畫Banner設計
date: 2016-07-19 19:25
tages: 前端實戰

0x01 內聯元素與塊元素

HTML文件中的元素大概可分為inline element和block element兩種。塊元素可以包含其他塊或內聯元素。如H1-H6，div,p,ul，ol等，但是H5中將a元素劃分為了塊元素，但是a元素依舊不能包含支援點選的互動元素如<a></a>,<button>等。

0x02 background簡寫屬性

CSS中有多個屬性用於設定背景樣式，其中background-color設計背景顏色，background-imag指定要使用的背景影象，background是否以及如何重複影象，background-attachment是否固定，background-position影象位置。

#p {background:#f8f8f8 url(./images/sign.png) no-repeat 0 4px;}

0x03 CSS定位

CSS有四種不同型別的定位，static(預設定位)，relative(相對定位)，absolute(絕對定位)，fixed(固定定位).

relative的元素不脫離文件流，而是參考自身右上角位置通過top，bottom，left，right進行定位。它原本所佔用的空間位置會被保留，不會別其它元素所佔用。

absolute和fixed的元素都是脫離文件流的，元素原先的空間位置會被關閉。但是absolute元素的位置相對於最近的已經定位的最先元素，若是沒有已定位的祖先元素，則相對於最初的塊。fixed則是選對於流浪器某個位置固定的，即使拖動瀏覽器的滾動條，該元素的位置也不會變。

0x04 font簡寫屬性

字型屬性的樣式有字型系列(font-family),字型大小(font-size),行間距(line-height),字型風格(font-style），字型粗細(font-weight)。

不同於background簡寫屬性，font簡寫屬性遵循如下規則：
1.至少要指定字型大小與字型系列

font:12px "Times New Roman";

2.行間距新增到字型大小之後，使用"/"分割

font:1opx/1.5  "Times New Romam";

3.設定字型粗細，字型風格，字型變體屬性時，要新增到字型大小之前

font:bold italic small-caps 12px/1.5 " Times New Roman";

0x04 偽類

CSS中與超連結有關的偽類如下:

種類|說明|
:---:|:---:|---
:link|向未被訪問的連結新增樣式
:visited|向已被訪問的連結新增樣式
:hover|滑鼠懸浮時的樣式
:active|向被啟用的元素新增樣式
:focus|獲得聚焦時的樣式

0x05 Transition動畫

Transition動畫通過transition屬性值來指定,四個屬性如下

屬性 說明
tansition-property 指定html元素的哪個css屬性來執行動畫處理
transition-duration 漸變時間
transition-timing-funciton 動畫效果，有linear，ease，ease-in，easr-out和ease-in-out等
transition-delay 延遲時間

同樣transition屬性也是支援簡寫的:

a.banner{   
 background:url(./Images/e.ico) no-repeat -100px 140px,    
 url(./Images/a.ico) no-repeat -20px -380px;
 transition:background-position .2s ease-in .2s;
}

0x06 使用jQuery播放聲音

實現效果，當滑鼠懸浮或者聚焦到某個元素時，開始播放聲音。

編寫播放聲音的js外掛程式碼

;(function($){//javascript自執行函式
    $.fn.banner_sound=function(audio_src){//使用jQuery.fn原型編號banner_sound函式
        var banner_audio;
        return this.each(function(){//返回this物件
            $(this)
                .bind('mouseover focusin',function(){
                banner_audio=new Audio(audio_src);//傳入音訊物件的路徑
                banner_audio.play();
            })
                .bind('mouseout focusout',function(){
                banner_audio.pause();
            });

        });
    };
})(jQuery);//在內部使用$代替jQuery

在html中呼叫

<head>
 <script src="jquery.js"></script>
    <script src="banner.js"></script>
    <script >
        (function($){
            $(function(){
                $('.banner').banner_sound('./Media/2CELLOS - Clocks.mp3');
            });
        })(jQuery);
    </script>
</head>

0x6 最後

設計網頁動態橫幅的所有程式碼。

HTML程式碼

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8"/>
    <tittle>CSS3 Banner Design -動畫Banner設計</tittle>
    <link rel="stylesheet" href="banner.css"/>
    <script src="jquery.js"></script>
    <script src="banner.js"></script>
    <script >
        (function($){
            $(function(){
                $('.banner').banner_sound('./Media/2CELLOS - Clocks.mp3');
            });
        })(jQuery);
    </script>
</head>
<body>
<a class="banner" href="http://www.baidu.com">
<img class="banner-logo" src="../Image/1.jpg" alt="baidu.com" width="167" height="134"/>
    <p class="banner-desc" >
        who am i?<br/>
        where am i?<br/>
        <strong>onejustone</strong>
    </p>
</a>
</body>
</html>

CSS程式碼

@charset "utf-8";
body{ padding:20px; background:#333333;}


a.banner{
    display:block;
    width:728px;
    height:176px;
    border:1px solid #555;

}

a.banner{
    background:url(Images/e.ico) no-repeat -100px 140px,
    url(Images/child_128px_1176085_easyicon.net.png) no-repeat -40px 220px,
    url(Images/a.ico) no-repeat -20px -380px,
    url(Images/c.ico) no-repeat 0 0;
    transition:background-position .2s ease-in .2s;
}
a.banner .banner-logo{
    position:absolute;
    top:20px;
    left:540px;
}


a.banner{
    position:relative;
    display: block;
}


/*設定Banner文字的位置和顏色*/
a.banner .banner-desc{
    opacity:0;
    position:absolute;
    top:35px;
    left:170px;
    font:30px/0.9 "Nanum Pen Script";
    color:#4ec1cd;
}

a.banner .banner-desc strong{
    font-size:23px;
}

/*當聚焦或者懸浮時顯示圖片*/
a.banner:hover,a.banner:focus{
    background-position:20px 140px,-40px 20px,-20px -90px,0,0;
}

/*設定文字透明度為0，當聚焦或者滑鼠懸浮時顯示*/
a.banner:hover .banner-desc,
a.banner:focus{
    opacity:1;

}

/*設定logo圖片居中*/
a.banner .banner-logo{
    position:absolute;
    top:20px;
    left: 50%;
}

JS程式碼:

;(function($){//javascript自執行函式
    $.fn.banner_sound=function(audio_src){//使用jQuery.fn原型編號banner_sound函式
        var banner_audio;
        return this.each(function(){//返回this物件
            $(this)
                .bind('mouseover focusin',function(){
                banner_audio=new Audio(audio_src);//傳入音訊物件的路徑
                banner_audio.play();
            })
                .bind('mouseout focusout',function(){
                banner_audio.pause();
            });

        });
    };
})(jQuery);//在內部使用$代替jQuery

相關文章