本篇文章為大家展示了CSS3中怎么實現(xiàn)swap交換動畫,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
創(chuàng)新互聯(lián)專注于燈塔企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站定制開發(fā)。燈塔網(wǎng)站建設(shè)公司,為燈塔等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站,專業(yè)設(shè)計,全程項目跟蹤,創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
首先得將HTML結(jié)構(gòu)設(shè)計好,一個固定的窗口,然后一個帶有黑色背景的笑臉
XML/HTML Code復(fù)制內(nèi)容到剪貼板
笑臉居中我們用最新的布局flex來實現(xiàn),這個也是很好用的屬性.之前文章中已經(jīng)有flex的相關(guān)教程,大家不懂的可以看看.
CSS Code復(fù)制內(nèi)容到剪貼板
div{
width: 200px;
height: 200px;
color: #fff;
border: #eee 2px solid;
}
div > span{
width: 100%;
height: 100%;
position: relative;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
font-size: 80px;
animation: anims 1s ease-in;
}
然后加入動畫,動畫是位置的變化,和元素縮放狀態(tài)的變化,再加入了透明度的變化.
CSS Code復(fù)制內(nèi)容到剪貼板
@keyframes anims {
0% {
rightright: 0px;
top: 0;
transform: scale(0);
opacity: 0.2;
}
50%{
top: 0;
rightright: -300px;
transform: scale(0.5);
opacity: 0.6;
}
90%{
top: 0;
rightright: -10px;
transform: scale(0.99);
opacity: 0.9;
}
100%{
top: 0;
rightright:0px;
transform: scale(1);
opacity: 1;
}
}
上述內(nèi)容就是CSS3中怎么實現(xiàn)swap交換動畫,你們學到知識或技能了嗎?如果還想學到更多技能或者豐富自己的知識儲備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。