CSS3是一種用于美化網(wǎng)頁的技術(shù),在這里我們將介紹如何用CSS3制作飄落的雪花。
/* 首先我們先設(shè)置一個容器,用于承載我們的雪花們 */ .snow { position: fixed; top: 0; width: 100%; height: 100%; z-index: -1; } /* 再來設(shè)置我們的雪花樣式 */ .snowflake { position: absolute; left: 50%; top: -10px; /* 雪花一開始要從視窗上面飄入 */ width: 10px; height: 10px; background: white; border-radius: 50%; box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.5); /* 雪花的陰影,讓它看起來更逼真 */ animation: snowAnimation 5s linear infinite; /* 這里用了CSS3的動畫效果,名字是snowAnimation,時長是5s,勻速運動,無限循環(huán) */ } /* 最后來定義動畫的具體內(nèi)容 */ @keyframes snowAnimation { 0% { transform: translateY(-10px) translateX(-50%) rotateZ(0deg); } 100% { transform: translateY(100%) translateX(-50%) rotateZ(360deg); } }
以上就是用CSS3制作飄落的雪花的全部代碼。具體來說,我們先在頁面中添加一個容器,用于承載所有的雪花,并且將其定位為fixed。接下來,我們定義.snowflake類用于定義每一個雪花的樣式,主要包括雪花的位置、大小、背景以及動畫效果等。最后定義一個名為snowAnimation的動畫,讓每一個雪花都按照這個動畫來運動,就可以達到飄落的效果了。
如果你想要增加飄落的雪花數(shù)量,只需要在.snow容器中添加多個.snowflake元素即可。
上一篇王道css如何操作