HTML

CSS

.outer_box {

width: 100px;

height: 100px;

border: #bbb 5px solid;

margin: 200px auto;

}

.inner_box {

background-color: #44b549;

width: 100%;

height: 100%;

position: relative;

animation: slide_down 2s linear infinite;

transform-origin: 200% 100%;

}

焦點圖片的跳轉(zhuǎn),可以有很多效果的實現(xiàn),比如漸漸消失,3D效果轉(zhuǎn)換,漸漸縮小,或者向下滑落消失.

我們就來看向下滑落的效果.這個效果主要還是利用定位Position,然后根據(jù)需要來控制top,left,或者bottom,right這四個方位的值.

向下滑動的效果,主要是依靠top這個屬性值,top從0到整個box的高度.這個時候最簡單的slidedown效果就出來了.

代碼名稱

@keyframes slide_down {

from {

top: 0;

}

to {

top: 100%;

}

}

CSS代碼是不是很簡單.下面 最終效果:

其他的效果,比如向右滑動,向左滑動或者向上滑動等等,可以在現(xiàn)有的代碼上,做加工.

本文屬于吳統(tǒng)威的博客, 微信公眾號:bianchengderen,QQ群:186659233 的原創(chuàng)文章,轉(zhuǎn)載時請注明出處及相應(yīng)鏈接:http://www.wutongwei.com/front/infor_showone.tweb?id=200 ,歡迎大家傳播與分享.

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com