碼上快樂

相關內容    簡體    繁體

仿網易nec首頁動畫效果

本文轉載自   查看原文   2013-06-16 22:37   2903    css/html

仿網頁nec首頁動畫效果
nec鏈接：http://nec.netease.com/

首先，介紹animation
animation檢索或設置對象所應用的動畫特效。
animation由“keyframes”這個屬性來實現這樣的效果。
keyframes具有其自己的語法規則，他的命名是由"@keyframes"開頭，后面緊接着是這個“動畫的名稱”加上一對花括號“{}”，括號中就是一些不同時間段樣式規則，有點像我們css的樣式寫法一樣。

關於animation屬性介紹：
animation-name：檢索或設置對象所應用的動畫名稱
animation-duration：檢索或設置對象動畫的持續時間
animation-timing-function：檢索或設置對象動畫的過渡類型
animation-delay：檢索或設置對象動畫延遲的時間
animation-iteration-count：檢索或設置對象動畫的循環次數
animation-direction：檢索或設置對象動畫在循環中是否反向運動
animation-play-state：檢索或設置對象動畫的狀態。w3c正考慮是否將該屬性移除，因為動畫的狀態可以通過其它的方式實現，比如重設樣式

nec動畫實現原理：
采用三層背景層、氣泡層、文字鏤空層。氣泡層通過animation屬性實現了運動效果。


html結構：

<div class="kbanner">
    <div class="knecbg knecone"></div>
    <div class="knecbg knectwo">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </div>
    <div class="knecbg knecthree"></div>
</div>


css樣式：

.kbanner{
    position: relative;
    width: 856px;
    height: 366px;
    background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_banner1.jpg) center top no-repeat;
}
.knecbg{
    position: absolute;
    left: 150px;
    top: 77px;
    width: 487px;
    height: 186px;
    overflow: hidden;
}
.knecone{
    background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_pao.png) left top no-repeat;
    z-index: 1;
}
.knectwo{
    z-index: 2;
}
.knecthree{
    background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_pao.png) left bottom no-repeat;
    z-index: 3;
}
.knectwo i{
    position: absolute;
    display: block;
    top: -50px;
    width: 53px;
    height: 56px;
    overflow: hidden;
    background: url(http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_pao.png) no-repeat -9999px -9999px;
    -webkit-animation: paoi 7s 2s infinite;
    -moz-animation: paoi 7s 2s infinite;
    -ms-animation: paoi 7s 2s infinite;
    animation: paoi 7s 2s infinite;
}
.knectwo i:nth-child(1){
    left: 25px;
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s;
    background-position: -507px 0;
}
.knectwo i:nth-child(2){
    left: 85px;
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
    background-position: -507px -64px;
}
.knectwo i:nth-child(3){
    left: 190px;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
    -ms-animation-delay: 4s;
    animation-delay: 4s;
    background-position: -507px -140px;
}
.knectwo i:nth-child(4){
    left: 285px;
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s;
    background-position: -507px 0;
}
.knectwo i:nth-child(5){
    left: 400px;
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -ms-animation-delay: 5s;
    animation-delay: 5s;
    background-position: -507px 0;
}
@-webkit-keyframes paoi {
    0% {
    top:186px;
}
100% {
    top:-56px;
}
}@-moz-keyframes paoi {
    0% {
    top:186px;
}
100% {
    top:-56px;
}
}@-ms-keyframes paoi {
    0% {
    top:186px;
}
100% {
    top:-56px;
}
}@keyframes paoi {
    0% {
    top:186px;
}
100% {
    top:-56px;
}



nec動畫效果：


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 仿淘寶首頁焦點圖輪播效果 高仿自如APP底部導航切換動畫效果 Asp.net MVC3 企業網站系統高仿博客園 首頁左側列表頁面 實現效果 android仿網易雲音樂引導頁、仿書旗小說Flutter版、ViewPager切換、爆炸菜單、風扇葉片效果等源碼 高仿京東到家APP引導頁炫酷動畫效果 Android仿騰訊手機管家實現桌面懸浮窗小火箭發射的動畫效果 網易雲音樂首頁導航樣式的實現 IOS 類似於網易新聞首頁新聞輪播的組件 ios 動畫效果 jQuery之動畫效果
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM