當(dāng)前位置:首頁(yè) >  IDC >  服務(wù)器 >  正文

純css實(shí)現(xiàn)輪播圖banner自動(dòng)輪換效果

 2020-10-15 11:17  來(lái)源: 腳本之家   我來(lái)投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過(guò)

話不多說(shuō) 直接上代碼

* {
margin: 0;
padding: 0;
}

.container {
margin:300px auto;
height: 400px;
width: 1146px;
overflow: hidden;
}

/* .wrap */
.wrap {
position: relative;
width:10000px;
left: 0px;
animation: animateImg ease 5s infinite normal;
}

/* 圖片大小 */
.wrap img {
width: 1146px;
float: left;
height: 400px;
display: block;
}

/* 動(dòng)畫(huà) */
@keyframes animateImg {
0% {
left: 0px;
}

20% {
left: -0px;
}

40% {
left: -1146px;
}

60% {
left: -2292px;
}

80% {
left: -3438px;
}

100% {
left: 0px;
}
}


動(dòng)畫(huà)效果像素根據(jù)自己圖片大小修改

<div class="container">
<div class="wrap">
<img src="images/banner1.jpg"alt="" />
<img src="images/banner2.jpg"alt="" />
<img src="images/banner3.jpg"alt="" />
<img src="images/banner4.jpg"alt="" />
</div>

文章來(lái)源:腳本之家,原文鏈接:https://www.jb51.net/css/745175.html

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)標(biāo)簽
網(wǎng)站建設(shè)

相關(guān)文章

  • 外貿(mào)商城網(wǎng)站建設(shè)哪家好 三大知名外貿(mào)商城綜合對(duì)比

    隨著國(guó)際化貿(mào)易的融合以及國(guó)家對(duì)外貿(mào)的支持,外貿(mào)電商越來(lái)越火,讓商品出海已經(jīng)是不少中大型企業(yè)的戰(zhàn)略性布局。雖然自建站會(huì)比SaaS有著靈活擴(kuò)展的優(yōu)勢(shì),但如何解決商品出海橫跨在企業(yè)和用戶(hù)眼前的語(yǔ)言難題,是不少企業(yè)需要考慮的一個(gè)核心點(diǎn)。

    標(biāo)簽:
    網(wǎng)站建設(shè)
  • 網(wǎng)站建設(shè)常用的建站系統(tǒng)推薦

    網(wǎng)站建設(shè)已經(jīng)很是普及的事情,稍微注重網(wǎng)絡(luò)宣傳的企業(yè)或單位都會(huì)有自己的網(wǎng)站,網(wǎng)站建設(shè)是一個(gè)比較復(fù)雜的過(guò)程,特別是對(duì)于非專(zhuān)業(yè)的人員來(lái)說(shuō),所以很多新手有網(wǎng)站建設(shè)需求,最先想到的是找本地一家網(wǎng)站建設(shè)公司來(lái)承建

    標(biāo)簽:
    網(wǎng)站建設(shè)
  • 自動(dòng)化建站優(yōu)化+賣(mài)站,看起來(lái)是個(gè)好生意

    這幾天在站長(zhǎng)論壇看到有人交流自動(dòng)化建站然后SEO優(yōu)化,最后在已3K+左右的價(jià)格賣(mài)出。看這確實(shí)讓人熱血沸騰,想馬上開(kāi)始行動(dòng)起來(lái),其實(shí)我個(gè)人覺(jué)得這里面還是有很多難點(diǎn)的。

    標(biāo)簽:
    網(wǎng)站建設(shè)
  • 網(wǎng)站建設(shè)過(guò)程中容易被忽略的元素是什么?

    網(wǎng)站從建設(shè)到真正運(yùn)營(yíng),會(huì)忽略很多元素。其實(shí)一個(gè)網(wǎng)站能否達(dá)到預(yù)期的效果,網(wǎng)站建設(shè)與網(wǎng)站優(yōu)化做好的同時(shí),很關(guān)鍵一點(diǎn),客戶(hù)自身的問(wèn)題。比如我們幫企業(yè)建設(shè)網(wǎng)站,網(wǎng)站提供的主要服務(wù)還是掌握在客戶(hù)手上。下面筆者談?wù)劸W(wǎng)站建設(shè)過(guò)程中容易被忽略的元素。詳情看下文

    標(biāo)簽:
    網(wǎng)站建設(shè)
  • 網(wǎng)站建設(shè)完成后還有哪些工作要做呢?

    這篇文章主要介紹了網(wǎng)站建設(shè)完成后還有哪些工作要做呢?如果網(wǎng)站建設(shè)圖圖便宜,那么后續(xù)服務(wù)將沒(méi)有保障,試想一下,大街上的便宜貨可沒(méi)有后期更換、后期指導(dǎo)等,下邊我們著重來(lái)分析網(wǎng)站建設(shè)后期可能出現(xiàn)的問(wèn)題,需要的朋友可以參考下

    標(biāo)簽:
    網(wǎng)站建設(shè)

熱門(mén)排行

信息推薦