武漢互贏網(wǎng)絡(luò)科技股份有限公司
為企業(yè)創(chuàng)品牌·從營銷型網(wǎng)站建設(shè)開始·互贏懂技術(shù)·更懂品牌營銷
24小時(shí)熱線
159 7210 9576027-89992189
為企業(yè)創(chuàng)品牌·從營銷型網(wǎng)站建設(shè)開始·互贏懂技術(shù)·更懂品牌營銷
24小時(shí)熱線
159 7210 9576027-89992189
隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，目前pc站的特效也越來越多，下面分享一種css3動(dòng)畫實(shí)現(xiàn)banner的一種特效
<html>
<!--在這里插入內(nèi)容-->
<ul class="box">
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
<li><span> </span></li>
</ul>
</html>
.box li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 24s linear infinite 0s;
-moz-animation: imageAnimation 24s linear infinite 0s;
-o-animation: imageAnimation 24s linear infinite 0s;
-ms-animation: imageAnimation 24s linear infinite 0s;
animation: imageAnimation 24s linear infinite 0s;
}
.box li:nth-child(1) span {
background-image: url(../images/banner1.jpg);
}
.box li:nth-child(2) span {
background-image: url(../images/banner2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.box li:nth-child(3) span {
background-image: url(../images/banner3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.box li:nth-child(4) span {
background-image: url(../images/banner4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1);
}
25% {
opacity: 0;
-moz-transform: scale(1.1);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1);
}
25% {
opacity: 0;
-o-transform: scale(1.1);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1);
}
25% {
opacity: 0;
-ms-transform: scale(1.1);
}
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1);
}
25% {
opacity: 0;
transform: scale(1.1);
}
100% { opacity: 0 }
}
最新動(dòng)態(tài)
生產(chǎn)小工單能給 生產(chǎn)管理帶來哪些好處？
武漢網(wǎng)站制作公司解鎖軟件開發(fā)能做什么？
營銷型網(wǎng)站與普通網(wǎng)站有什么區(qū)別？——武漢網(wǎng)站建設(shè)
常見問題百寶箱
A2014，有位學(xué)妹不顧家人反對，在上海這個(gè)國際化大都市謀了一個(gè)公眾號助理的職位。斗志昂揚(yáng)地奮斗了 3 年，我眼看著她的內(nèi)容駕馭能力突飛猛進(jìn)，內(nèi)容質(zhì)量從三流到一流，職位
A文章主要分析了不同的視覺設(shè)計(jì)元素是如何影響網(wǎng)站用戶體驗(yàn)，希望通過文章的解讀能夠?qū)δ愕漠a(chǎn)品設(shè)計(jì)帶來些啟發(fā)。 也許是因?yàn)槲以谝曈X設(shè)計(jì)上沒有太多經(jīng)驗(yàn)，我發(fā)現(xiàn)
A雙贏系統(tǒng)建站系統(tǒng)，三網(wǎng)同步，建站推廣一步到位雙贏系統(tǒng)建站系統(tǒng)，三網(wǎng)同步，建站推廣一步到位雙贏系統(tǒng)建站系統(tǒng)，三網(wǎng)同步，建站推廣一步到位雙贏系統(tǒng)建站系統(tǒng)，三網(wǎng)同步，建站推
027-89992189
掃一掃關(guān)注微信
Copyright 2013-2020 All Rights Reserved 武漢互贏網(wǎng)絡(luò)科技股份有限公司 鄂ICP備19027860號
