?????????????今天做了個(gè)小功能,如下:
hibenben.com1.GIF
這就是一個(gè)側(cè)滑效果,在css style里就能實(shí)現(xiàn)
/* 首先用到了keyframes,想要深究可以自行進(jìn)入w3school官網(wǎng)搜索學(xué)習(xí),另外一個(gè)transform平移,而translate3d呢是一個(gè)比translate多兩個(gè)參數(shù)的東西,可以實(shí)現(xiàn)更豐富的效果 */
@keyframes bounceInLeft {
0% {
transform: translate3d(-3000px, 0, 0);
}
60% {
/* opacity: 1;不透明*/
transform: translate3d(25px, 0, 0);
}
75% {
transform: translate3d(0px, 0, 0);
}
90% {
transform: translate3d(0px, 0, 0);
}
100% {
transform: none;
}
}
<!-- 這里使用上面定義的動(dòng)畫(huà)效果,后面用到了貝塞爾曲線實(shí)現(xiàn)快慢效果 -->
.floatImg{
animation: bounceInLeft 3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
另外學(xué)到了一個(gè)很好玩的東西position,我總把它記成location,類(lèi)似于Android xml的布局定位屬性
http://www.w3school.com.cn/cssref/pr_class_position.asp
style="position: fixed"
/* 它有四個(gè)屬性absolute斩跌、fixed绍些、relative、static耀鸦、inherit*/
具體上面給了鏈接柬批，我就不一一解釋了啸澡，準(zhǔn)備準(zhǔn)備下班趕地鐵了！
