CSS動(dòng)畫:(向下滑)slidedown效果_html/css

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 16:37:10

CSS動(dòng)畫:(向下滑)slidedown效果_html/css

CSS動(dòng)畫:(向下滑)slidedown效果_html/css_WEB-ITnose:我們依據(jù)上一篇文章的HTML代碼結(jié)構(gòu),來(lái)實(shí)現(xiàn)一般焦點(diǎn)圖片跳轉(zhuǎn)時(shí)候的效果. HTML CSS .outer_box { width: 100px; height: 100px; border: #bbb 5px solid; margin: 200px auto; } .inner_box { background-co

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀CSS動(dòng)畫:(向下滑)slidedown效果_html/css_WEB-ITnose:我們依據(jù)上一篇文章的HTML代碼結(jié)構(gòu),來(lái)實(shí)現(xiàn)一般焦點(diǎn)圖片跳轉(zhuǎn)時(shí)候的效果. HTML CSS .outer_box { width: 100px; height: 100px; border: #bbb 5px solid; margin: 200px auto; } .inner_box { background-co

我們依據(jù)上一篇文章的HTML代碼結(jié)構(gòu),來(lái)實(shí)現(xiàn)一般焦點(diǎn)圖片跳轉(zhuǎn)時(shí)候的效果.

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%;

}

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

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

向下滑動(dòng)的效果,主要是依靠top這個(gè)屬性值,top從0到整個(gè)box的高度.這個(gè)時(shí)候最簡(jiǎn)單的slidedown效果就出來(lái)了.

代碼名稱

@keyframes slide_down {

from {

top: 0;

}

to {

top: 100%;

}

CSS代碼是不是很簡(jiǎn)單.下面最終效果:

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

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

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